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

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

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

目次

  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種類存在しています。表示される画面はどちらも同じですので、利用しやすい方を使ってみましょう。

メニューから表示

Webページ上で右クリック

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

「ページのソースを表示」をクリック

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

ソースが表示される

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

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

Webページ上で「Ctrl+U」キーを押す

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

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

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

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

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

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

アドレスバーをタップ

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

鉛筆マークをタップ

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

先頭に「view-source:」を入力

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

キーボードのエンターキーをタップ

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

ソースコードが表示される

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

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

最後に

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

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

ThumbChromeデベロッパーツールの機能と使い方【初心者向け】
Chromeというブラウザには、デベロッパーツールというGoogleが提供しているツールが存...
Thumb Chromeでクッキー(Cookie)を確認する方法
時折、インターネットサーフィンなどを行っている時にCookieを確認しなければいけない時があ...
ThumbChromeで縦長のWebページ全体スクリーンショットを撮る方法!拡張機能不要でキャプチャを撮影!
今回の記事では、Chromeで縦長のWebページ全体スクリーンショットを撮る方法!拡張機能不...

関連するまとめ

関連するキーワード

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

人気の記事

人気のあるまとめランキング
インステ