【Chrome】ソースを表示する方法をPC・Androidスマホ別に紹介！

Webサイトをこれから作成してみようとしている人などは、実際に存在しているサイトのソースを参考にして構築している人も少なくないでしょう。

Internet Explorerでは設定メニューからソースの確認などが簡単におこなえましたが、Chromeの場合はソースコードの確認のやり方が異なります。

ソースを編集して見やすいように変更できるデベロッパーツールもありますが、こちらは上級者向けで、パーツごとのCSSなどの確認には利用できるものの全体を一気に確認するには少々使いづらいと感じる人もいます。

そんなデベロッパーツールではなく純粋にソースコードを確認することはChromeでも可能です。

様々なWebサイトのソースのHTMLなどのソースコードをChromeで確認する場合、PCとAndroidスマホそれぞれやり方が異なりますので、どのように確認するのかを説明していきます。

PCのChromeを利用してWebサイトのHTMLなどのソースコードを表示する場合のやり方としては2種類存在しています。表示される画面はどちらも同じですので、利用しやすい方を使ってみましょう。

まずはChromeのメニューから表示する方法です。ソースを確認したいWebサイト上で右クリックしてください。

メニューの中の「ページのソースを表示」をクリックしましょう。

Chromeで別のタブが開き、そこにWebサイトのソースコードが表示されます。

Chromeのショートカットキーを利用してページのソースを開くこともできます。マウスをあまり使わないような場合や、キーボードを主体で利用している場合はこちらのほうが簡単に起動できる分使いやすいと感じる人もいます。

ChromeでWebサイトのHTMLなどのソースを表示するショートカットは「Ctrl+U」キーです。前述したメニューから表示させる場合同様、新しいタブでソースが表示されます。

Androidスマホの場合、メニューを開いてもソースを表示する項目はありません。デベロッパーツールもありませんので、Androidスマホでは確認できないのかと思った人もいるかと思います。

しかし、Androidスマホでもソースコードの確認は可能です。AndroidスマホのChromeでソースコードを表示させるためにURLに追加入力する必要があります。

AndroidスマホのChromeでWebサイトのソースコードを確認したい場合、まずは画面上部にあるアドレスバーをタップしてください。

そのページのURLとメニューが表示されます。鉛筆マークをタップしましょう。

ChromeのアドレスバーのURLの編集ができるようになります。URLの先頭に「view-source:」を入力してください。

入力が完了したらエンターキーをタップしましょう。

新しいタブではなくそのページの遷移画面としてソースコードが表示されます。

Androidスマホからソースコードの確認をよく使う場合、キーボードアプリの辞書などにソースコード表示に必要な「view-source:」を設定しておいて（よみがなは任意）、簡単にソースコードが確認できるようにしておくと便利です。

WebサイトのソースコードはHTMLやCSSなど、参考にできる部分も多くWebサイトの内容を確認したいことはWebページ作成者にとっては確認する方法というのは存外重要なものとも言えます。

参考にする以外にも自身のサイトのデバックにも利用できるため、Chromeでのソースコードの表示方法を覚えておいて損はありません。Chromeのソースコードの表示方法は難しいものではありませんので、気軽に使ってみてください。