Google ChromeでHTMLソースを表示する方法|ショートカットと開発者ツールの使い方

この記事の要点

• Webページ上で右クリックし、「ページのソースを表示」を選択します。
• ショートカットキーは、WindowsならCtrl+U、MacならCommand+Option+Uです。
• Chromeのデベロッパーツールを使うには、メニュー(縦3点アイコン)>「その他のツール」>「デベロッパーツール」を選択します。

この記事では、Google ChromeでWebサイトのHTMLソースコードにアクセスする方法と、Chromeのデベロッパーツールの開き方・活用方法について解説します。サイトのソースコードを読むことは、初心者がHTMLを学ぶうえで最も効果的な方法のひとつです。

Chromeでソースコードを表示する手順

それでは、Webサイトのソースコードはどのようにして見ればよいのでしょうか?ここからは、Google Chromeを使った具体的な手順をステップごとに説明します。

1. Google Chromeを起動します(まだインストールしていない場合は、公式サイトから無料でダウンロードできます)。
2. 調べたいWebページに移動します。
3. ページ上の空いている部分で右クリックするとメニューが表示されるので、その中から「ページのソースを表示」をクリックします。
   
4. そのページのソースコードが、ブラウザの新しいタブに表示されます。
5. マウス操作の代わりに、キーボードショートカットを使うこともできます。Windows PCではCtrl+U、MacではCommand+Option+Uを押すだけで、ソースコードが表示された画面が開きます。

Chromeのデベロッパーツールを活用する

Google Chromeが標準で備えるシンプルな「ページのソースを表示」機能に加えて、強力なデベロッパーツールを使えば、サイトをさらに深く分析できます。このツールでは、HTMLだけでなく、HTMLドキュメント内の各要素に適用されているCSSも確認できます。

Chromeのデベロッパーツールを開く手順は以下の通りです。

1. Google Chromeを起動します。
2. 調べたいWebページに移動します。
3. ブラウザウィンドウ右上にある縦3点のメニューボタンをクリックします。
4. メニューから「その他のツール」にカーソルを合わせ、表示されたサブメニューから「デベロッパーツール」を選択します。
   
5. 画面左側にHTMLソースコード、右側に関連するCSSが並んだパネルが開きます。

もうひとつ便利な方法があります。Webページ上の特定の要素を右クリックして「検証」を選択すると、デベロッパーツールが起動し、選択した箇所がHTML内でハイライトされ、対応するCSSが右側に表示されます。サイトの特定のパーツがどのように作られているのかを詳しく知りたいときに、非常に役立つ機能です。

ソースコードを見るのは違法?合法性について

これまでに多くの新人Webデザイナーから、「他のサイトのソースコードを見て、勉強したり自分の仕事に活かしたりしても問題ないのか」という質問を受けてきました。結論から言えば、サイトのコードを丸ごとコピーして自分の作品として公開するのは当然アウトですが、コードを学習の出発点として参考にすることは、むしろこの業界の発展を支えてきた文化です。

冒頭でも述べたように、今日活躍しているWebのプロフェッショナルの中に、サイトのソースを見て何かを学んだ経験がない人を見つけるのは困難です。つまり、ソースコードを見ること自体は合法であり、それを参考に似た仕組みを作ることにも問題ありません。トラブルになるのは、コードをそのまま流用して自分の成果物だと主張した場合だけです。

Webのプロフェッショナルたちは互いに学び合い、インスピレーションを受けた作品を改良しながら成長していきます。だからこそ、遠慮せずにサイトのソースコードを開き、学習ツールとして積極的に活用しましょう。

ソースコードはHTMLだけではない

ひとつ覚えておきたいのは、ソースファイルは非常に複雑になり得るという点です。閲覧しているWebサイトが大規模であればあるほど、そのコードも複雑になっている傾向があります。ページを構成するHTML構造に加えて、サイトの見た目を制御するCSS(カスケーディングスタイルシート)が含まれ、さらに近年の多くのサイトでは、HTMLと一緒にスクリプトファイルも読み込まれています。

スクリプトファイルは1つとは限らず、それぞれがサイトの異なる機能(アニメーション、通信処理、広告など)を担っていることも珍しくありません。正直に言えば、特に初心者にとっては、ソースコードは圧倒されてしまうほど大量に見えるかもしれません。最初は全体像が掴めなくても、焦る必要はありません。HTMLソースを見ることは、あくまで学習の第一歩です。経験を重ねるうちに、これらの要素がどのように組み合わさって、普段ブラウザで見ているWebサイトが出来上がっているのかが少しずつ分かるようになります。コードに慣れるほど読み取れる情報は増え、以前は難解に思えたソースも、いつしか貴重な教材に変わっていくはずです。