Chromeでソースコードを表示する方法！AndroidスマホやPCでのやり方を解説！

Chromeなどのブラウザで閲覧できるWebページというのは、必ずHTMLで記述されて作成されています。ネットサーフィンをしていて、どのようなHTMLで記述されているのか気になるときには、Chromeなら簡単にソースを表示してHTMLなどのコードを確認できます。

この記事では、PCとAndroidスマホのGoogle Chromeを使って簡単にできるWebページのソースを表示する方法を解説します。

なお、iPhoneでもGoogle Chromeを利用できますが、iPhone版のGoogle ChromeはiPhoneの仕様になっているためにご紹介する方法ではソースコードの確認はできません。今回はPC版とAndroidスマホ版のChromeのみのご紹介となります。

PC版のChromeでソースコードを表示する方法をご紹介します。PC版Chromeの場合には、ただ単にソースコードを表示する方法と、ソースコードの詳細を確認出来る方法があります。

ただ単にブラウザ上にソースコードを表示するだけなら、右クリックから簡単にソースコードを表示できます。まずはソースコードを表示したいWebページをChromeで表示したら、コンテンツがなにもないところで右クリックします。

画面上に表示されたメニューの「ページのソースを表示」をクリックします。

するとChromeの画面上にそのページを構成しているHTMLのソースコードが表示されます。

ソースコードの詳細を確認したい場合には、Chromeのデベロッパーツールを使うと良いでしょう。 デベロッパーツールとは、開発者向けにChromeに搭載されているツールです。特別なソフトなどを利用しなくても、Chrome上でWebページのソースや表示スピード、通信状況などを確認できます。

開発者でやシステムエンジニアでなくても、Chromeユーザーであれば、誰でも簡単に利用できます。通常のソースの表示よりも、詳細を調べたいときにおすすめです。デベロッパーツールを使う方法は次の通りです。

まずはChromeの右上の「︙」をクリックして、「その他ツール」＞「デベロッパーツール」と開きます。

するとChromeの画面の右側にデベロッパーツールが開きます。タブを切り替えると、ソースコードの内容が変わり、細かいWebサイトの構成などを調べることができます。

AndroidスマホのChromeでもソースコードを表示することができます。AndroidスマホのChromeでソースコードを表示する場合には、ChromeのアドレスバーのURLの前に「view-source:」を追加するだけです。これだけで、そのページのソースコードが表示されます。

ただし、アドレスバーにURLが表示されている状態で、URLの先頭に「view-source:」を入力するのが少し大変です。表示されているURLの先頭に入力しようとタップすると、検索キーワードを入力する画面になってしまうためです。

この方法を使うためには、先にソースコードを表示したいURLをクリップボードにコピーしておく必要があります。

URLをクリップボードにコピーする方法は、Chromeの右上の「︙」をタップします。表示されたメニューの中の「共有」の右側の「コピペ」マークをタップします。するとそのWebページのURLをコピーできます。

アドレスバーに「view-source:」を入力したあとに長押しをして「貼り付け」を押します。すると、コピーしたURLを貼り付けられます。

そのままキーボードのEnterをタップすればそのWebページのソースコードがChrome上に表示されます。PCとスマホでは違うコードで記述されていることもあるので、スマホならではのコードの使い方を確認してみましょう。

この記事では、Chromeでソースコードを表示する方法をお伝えしました。やり方を覚えれば、PCでもスマホでも簡単にソースコードを表示できます。ぜひ、気になるページのソースを確認したいときには、ご紹介した方法でソースコードを表示してみましょう。