Chrome で HTML コードを表示する方法

デバイスリンク

• アンドロイド
• iPhone
• Chromebook
• マック
• ウィンドウズ
• デバイスが見つかりませんか?

Web ページがどのように構成されているかについて興味がありますか? Web サイトのフォント サイズや色を変更する方法を知りたいですか? Web ページの HTML コードを表示すると、これらすべてのことやそれ以上のことを行うことができます。

このチュートリアルでは、Chrome で Web ページの HTML コードを表示する方法を説明します。

Chrome での HTML コードの表示

HTML で記述する場合、ソース コードは、Web ページの構造とコンテンツを定義するために使用される一連のタグと属性です。

ソース コードは Web ブラウザによって読み取られ、画面上に表示されるグラフィカルな Web ページに変換されます。Web ページのルック アンド フィールを定義するだけでなく、ソース コードを使用して、ポップアップ ウィンドウ、フォーム、ドロップダウン メニューなどの対話機能を追加することもできます。

平均的なインターネット ユーザーは、Web ページの HTML ソース コードを表示する必要はまったくないかもしれませんが、ユーザーによっては、そうしたいと考える理由がいくつかあります。

開発者にとって、ソース コードを表示することは、ページがどのように構造化されているかを理解し、どのスタイル要素やスクリプト要素が使用されているかを判断するのに役立ちます。デザイナーにとって、他のデザイナーが HTML を使用して効果的なレイアウトを作成した方法を知ることは有益です。

場合によっては、ユーザーはソース コードを表示してエラーをトラブルシューティングしたり、特定の Web サイトや Web アプリケーションがどのように動作するかについて詳しく知りたい場合もあります。理由が何であれ、HTML ソース コードの表示は Chrome で比較的簡単なプロセスです。

Windows PC 上の Chrome で Web ページの HTML コードを表示する方法

Windows オペレーティング システムは、Chrome と最も互換性のあるシステムの 1 つです。Chrome は、Microsoft が主要な貢献者であるオープンソースの Chromium プロジェクトを基盤として構築されています。この互換性は HTML 領域にも拡張されており、一般的なブラウザを使用すると、ユーザーはあらゆる Web サイトの HTML コードを表示できます。

HTML コードは 2 つの方法で表示できます。

「ページソースの表示」の使用

この方法は簡単です。

1. Chrome を開き、HTML ソース コードを表示するページに移動します。
   
2. ページを右クリックして [ページ ソースの表示] を選択するか、キーボードの Ctrl + U を押して新しいタブでソース コードを開きます。
   

ソース コードが新しいタブに表示され、スクロールしてそのページの HTML マークアップを表示できます。

開発者ツールの使用

Google Chrome の開発者ツールを使用して Web ページのソース コードを検査するには、次の手順に従います。

1. Google Chrome を開き、検査する Web ページに移動します。
   
2. キーボードの Ctrl + Shift + I を押します。開発者ツール ペインが、表示している Web ページの横のドックに開きます。
   
3. ペインの上部にある「要素」タブをクリックします。これにより、Web ページの HTML ソース コードが表示されます。
   
4. これで、ページのソース コードを確認できるようになります。要素を折りたたむには、タグ名の横にある三角形をクリックします。コンポーネントに関する詳細情報を表示するには、コンポーネントを右クリックして「検査」を選択します。
   

この方法は HTML ページに最適であることに注意してください。他の種類の Web ページのソース コードを表示することは可能ですが、書式設定が読みにくい場合があります。

Mac 上の Chrome で Web ページの HTML コードを表示する方法

Web 開発者にとって、Web ページの HTML コードを表示できることは重要です。これにより、ページがどのように構成されているかを確認し、発生する可能性のある問題のトラブルシューティングを行うことができます。幸いなことに、Mac 上の Chrome では簡単に実行できます。次の手順に従ってください。

1. Chrome を開き、HTML コードを表示する Web ページに移動します。
   
2. ページ上で右クリックし、「検査」を選択します。
   
3. 画面の下部に新しいペインが開き、HTML コードが表示されます。
   
4. HTML コード内の特定の要素をクリックして、ページ上でその要素がどのようにスタイル設定されているかを確認することもできます。たとえば、要素を選択し、表示されたペインで [スタイル] タブをクリックすると、その要素にどの CSS スタイルが適用されているかを確認できます。
   
5. ペインを閉じるには、右上隅の「X」をクリックします。
   

あるいは、Chrome デベロッパー ツールを使用してソース コードを表示することもできます。

1. Google Chrome を開き、検査する Web ページに移動します。
   
2. ブラウザの右上隅にあるメニュー アイコン (3 つの点) をクリックし、ドロップダウン メニューから [その他のツール] と [開発者ツール] を選択します。
   
3. 画面の下部に [開発者ツール] パネルが開きます。ペインの上部にある「要素」を選択します。
   
4. 現在のページの HTML コードが [要素] パネルに表示されます。パネル内のさまざまなオプションを使用して、必要に応じてコードを検査およびデバッグできます。
   

数回クリックするだけで、Mac 上の Chrome であらゆる Web ページの HTML コードを簡単に表示できます。これは、Web 開発の問題のトラブルシューティングを行っている場合や、特定の Web サイトがどのように構築されているかを詳しく調べたい場合に役立ちます。

iPhoneアプリのChromeでWebページのHTMLコードを表示する方法

iPhone を使用している場合は、次の 2 つの方法で Chrome の任意のページの HTML コードを表示できます。

URLを微調整する

URL を少し調整することで、どのページの HTML コードも簡単に表示できます。

1. Chrome を開き、HTML コードを表示したい Web ページに移動します。
   
2. アドレスバーを 1 回タップして編集モードを開始します。
   
3. カーソルを URL の先頭に移動します。
   
4. 「View-source」と入力し、「Go」ボタンを押します。Web ページの HTML コードが Chrome に表示されます。
   

開発者ツールの使用

Chrome デベロッパー ツールは iOS でも利用できますが、PC とは異なる起動手順が必要です。

1. 画面の右上隅にある 3 つの点をタップし、「設定」を選択します。
2. 下にスクロールして「詳細」をタップし、「開発者ツール」の横にあるトグルを有効にします。
3. ページの空の領域を長押しし、「要素を検査」を選択します。これにより、そのページの HTML コードを含むサイド パネルが開きます。

Android アプリの Chrome で Web ページの HTML コードを表示する方法

Android スマートフォンで Chrome アプリを使用しているときに、Web ページの HTML コードを表示したい場合があります。これは、ページの問題のトラブルシューティングを行っている場合、またはページがどのように構成されているかを確認したい場合に役立ちます。Android スマートフォンの Chrome で Web ページの HTML コードを表示するには、次の手順に従います。

1. Android で Chrome を開きます。
   
2. 「view-source:」と入力し、その後にソース コードを表示するページの URL を入力します。たとえば、www.google.com のソース コードを表示したい場合は、Chrome のアドレス バーに「view-source:www.google.com」と入力します。
   

これにより、Chrome の組み込みのデベロッパー ツール インターフェイスでそのページの HTML コードが開きます。そこから、必要に応じてコードを表示および編集できます。この方法は、表示しようとしている Web サイトがソース コードへのアクセスを許可している場合にのみ機能することに注意してください。そうでない場合は、エラー メッセージ以外は何も表示されません。

iPad 上の Chrome で Web ページの HTML コードを表示する方法

iPad アプリの Chrome を使用すると、あらゆる Web ページの HTML コードを簡単に表示できます。次の手順に従ってください。

1. Chrome を開き、「view-source:」と入力し、その後に表示したいページの URL を入力します。たとえば、www.alphr.com のソース コードを表示したい場合は、Chrome のアドレス バーに「view-source:www.alphr.com」と入力する必要があります。
   
2. 「実行」ボタンを押します。
   

これにより、Chrome 内の新しいタブにページのソース コードが読み込まれるはずです。そこから、必要に応じてコードを保存または共有できます。

ソースコードはページを結び付ける接着剤です

HTML はあらゆる Web サイトの基礎です。訪問者がブラウザにページを読み込んだときに表示される構造とコンテンツを提供します。

ページの最終的な外観は CSS または他のスタイル言語によって決定されますが、HTML コードはページの基本構造とコンテンツを決定します。変更によってはページが壊れる可能性があります。このため、ソース コードを表示または変更する場合は、HTML をよく理解することが重要です。

また、HTML コードの表示が役立つ場合もありますが、コードに加えられた変更はライブ Web ページには反映されないことに注意してください。サイトの管理者によって公開された変更のみが訪問者に表示されます。

このチュートリアルで説明した方法のいずれかを使用して、Web ページの HTML コードを表示してみましたか? どうだった？

コメント欄でお知らせください。