こんにちは、プログラミングのせせらぎ管理人です。
ウェブデザインやプログラミングの勉強をしていると、憧れているサイトのソースコードが気になってきませんか？例えば、「出来れば参考にして自分のものにしたい」や「どうゆう構成をしているのか見たい」など。でも「どうやればそのサイトのソースコードを見れるんだろう、何か方法がありそうだな」と思っているあなた！
実は、chromeの機能には、サイトのソースコードを表示させる便利なコマンドがあります。そこで今回は、AndroidなどのChromeでサイトのソースコードを表示させる方法について詳しい僕が共有していきたいと思います。特に「これからプログラミングを始めたい方」などはぜひ参考にしていただければ幸いです！
URLの先頭に「view-source:」を追加する
Chromeをまだインストールしていない方は、Googleプレイストア等から、まずChromeをインストールして下さい。Chromeを開くと、左上に家のようなマークがあって、その右にURLを表示する入力フォームがあります。特徴として南京錠のような鍵マーク（SSL対応・非対応）がサイトによって、あったり無かったりするところです。ソースコードの表示は、このURLの入力フォームを使って操作します。
その画面が確認できたら、次にそのURLが入力されている入力フォームをタップします。そうすると画面が上下に動いてモードが、入力モードに切り替わります。その後、キーボードが下方に表示されるので、入力フォームに書かれているURLの先頭「https://」が表示された場合は、それより左側に「view-source:」とキーボードやスクリーンから記述してください。つまり、最も左側に記述します。
当サイトを例に使用すると「awaisora.com」というURLの先頭に先ほどのコマンドを追加すると「view-source:awaisora.com」「※（view-source:https://awaisora.com）」という風になります。このコマンドは、Chromeのコマンドで、これこそが今回の記事で唯一のポイントとなる大切な部分です。むしろ、このコードしか使わないので説明はこれにて終了です。
一応このコマンドを使って検索した後の画面を言葉で説明しておくと、画面いっぱいに収まったHTMLといったソースコードが上から下まで表示されます。HTMLの初心者の方であれば、たぶん意味がわからない知らないコードもあると思うので見るだけで疲れるかと予想できますが、見るだけで勉強になると思うのでじっくりと目を通すのも面白いと思います！
CSSを検索する
どこかのウェブサイトで気に入った、デザインがあったとき真似して自分のウェブページにも、取り入れたいと思ったことはありませんか？そんな時、先ほどの「view-source:」コードを使って、CSSも探せるのですが、何と言っても探すのに時間がかかり、目もチカチカして大変です。
そんな時、使えるのが「ctrl+F」のコマンドか「command+F」のコマンド２つで、この検索機能は、僕の確認した中で今のところＰＣのみで使えます。このコマンドを押すと、上に検索バーが表示されるので、そこに「.css」と入力して検索しましょう。すると、する前とした後で比べて、いくらか探すのが容易になると思います。
以上、AndroidなどのChromeでサイトのソースコードを表示する方法でした。長々説明しましたがポイントは「view-source:」というコマンドと、CSSを検索する「ctrl+F」か「command+F」のコマンドです。最後までご覧いただきありがとうございました！
コメント