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

Chromeからそのサイトのソースを確認するために表示させたい、と思ったことはありませんか? PCとAndroidスマホとではChromeでソースを表示するためのやり方が異なりますので、それぞれどのようなやり方をするのかを説明していきます。

目次

  1. 1【Chrome】ソースを表示する方法
  2. PCでChromeのソースコード/ HTMLを表示する方法
  3. Android/スマホでCromeのソースコード/ HTMLを表示する方法
  4. 最後に

【Chrome】ソースを表示する方法

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

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

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

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

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

PCでChromeのソースコード/ HTMLを表示する方法

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

メニューから表示

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

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

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

ショートカットキーで表示

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

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

Android/スマホでCromeのソースコード/ HTMLを表示する方法

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

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

サイトのURLの先頭に「view-source:」と入力

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

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

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

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

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

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

関連するまとめ

関連するキーワード

この記事のライター
八千草 蛍
分かりやすく気軽に読める記事を書いてまいりたいと思います。よろしくお願いいたします。

人気の記事

新着まとめ