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

デバイスリンク

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

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

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

開発者ツールの使用

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

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

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

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

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

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

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

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

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

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

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

URLを微調整する

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

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

開発者ツールの使用

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

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

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

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

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

これにより、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」と入力する必要があります。
    Chrome で HTML コードを表示する方法
  2. 「実行」ボタンを押します。
    Chrome で HTML コードを表示する方法

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

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

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

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

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

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

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

Sign up and earn $1000 a day ⋙

Windowsでソフトウェアをインストールできないエラーを修正する方法

Windowsでソフトウェアをインストールできないエラーを修正する方法

Windows でソフトウェアをインストールできないエラーを修正する方法、Windows 10/11 にアプリやソフトウェアをインストールできないのはなぜですか? 修正方法について知っておくべきことはすべてここにあります

Windows 11 で PIN を削除または変更する手順

Windows 11 で PIN を削除または変更する手順

Windows 11 で PIN コードを削除または変更する手順、Windows 11 では、PIN コードはユーザーにとって非常に便利で便利なセキュリティ ツールです。しかし、一部の人は

Windows 10で「現在利用可能な電源オプションがありません」エラーを修正する方法

Windows 10で「現在利用可能な電源オプションがありません」エラーを修正する方法

Windows 10 で「現在利用可能な電源オプションがありません」エラーを修正する方法、Windows 10 で電源モードを選択できません。どうすればよいですか? エラーを修正する方法は次のとおりです

Windows 10でフォトアプリケーションエラーを修正する最も簡単な方法

Windows 10でフォトアプリケーションエラーを修正する最も簡単な方法

Windows 10 でフォト アプリのエラーを修正する最も簡単な方法、Microsoft フォトが機能しない場合はどうすればよいですか? Windows 上のフォト アプリのエラーを修正する方法について心配する必要はありません。

Windows 11 で入力言語を切り替えるためのキーボード ショートカットをインストールする手順

Windows 11 で入力言語を切り替えるためのキーボード ショートカットをインストールする手順

Windows 11 で入力言語を切り替えるショートカットをインストールする手順。 Windows を使用する過程で、ユーザーは頻繁に方法を切り替える必要があります。

Windows 11でサポートされている電源ステータスを確認する方法

Windows 11でサポートされている電源ステータスを確認する方法

電源状態を確認する方法は Windows 11 でサポートされており、Windows 11 はさまざまな電源状態を処理できます。電源の状態を確認する方法は次のとおりです

Windows 10で2.4GHzから5GHzに切り替える方法

Windows 10で2.4GHzから5GHzに切り替える方法

Windows 10 で 2.4 GHz から 5 GHz に切り替える方法。インターネットを高速化する迅速かつ簡単な方法を見つけたい場合は、WiFi 帯域を 2.4 GHz から 5 GHz に変更すると役立つ場合があります。

Windows で Microsoft Excel を実行するにはメモリが不足していますというエラーを修正する方法

Windows で Microsoft Excel を実行するにはメモリが不足していますというエラーを修正する方法

Windows で Microsoft Excel を実行するにはメモリが不足していますというエラーを修正する方法。Microsoft Excel を実行するにはメモリが不足しているというエラーが発生していますか? それで、メモリが不足しているエラーを修正する方法

Windows ですべてのビデオ ファイルを検索する方法

Windows ですべてのビデオ ファイルを検索する方法

Windows ですべてのビデオ ファイルを見つける方法、PC で録画および保存したビデオが見つからない。Windows ですべてのクリップを検索する方法を以下に示します。

Windows 10および11のカメラアプリでエラー0xa00f4288を修正する方法

Windows 10および11のカメラアプリでエラー0xa00f4288を修正する方法

Windows 10 & 11 のカメラ アプリでエラー 0xa00f4288 を修正する方法。 Windows のデフォルトのカメラ アプリは、写真を撮るための主要なツールです。Win 10 および 11 カメラの場合

Windows 10で1つのショートカットで複数のプログラムを開く方法

Windows 10で1つのショートカットで複数のプログラムを開く方法

Windows 10 で 1 つのショートカットで複数のプログラムを開く方法、実際には 1 つのキーで複数のプログラムを同時に開くことができます。使い方はこちら

Windows で古いブート メニュー オプションを削除する方法

Windows で古いブート メニュー オプションを削除する方法

Windows で古いブート メニュー オプションを削除する方法、Windows 10 デュアル ブートは便利ですが、メニューに冗長なブート オプションが残る可能性があります。メニューを削除する方法は次のとおりです

Windows 11 で Snipping Tool のエラーを修正する手順

Windows 11 で Snipping Tool のエラーを修正する手順

Windows 11 で Snipping Tool のエラーを修正する手順。Windows 11 が正式にリリースされてしばらく経ちますが、使用中にまだ多くのエラーが発生します。

Windows 11 で音声でテキストを入力する手順

Windows 11 で音声でテキストを入力する手順

Windows 11 で音声でテキストを入力する手順、Windows 11 で音声でテキストを入力すると、作業効率が大幅に向上します。その方法は次のとおりです

Windows11搭載のパソコンで削除してしまったデータを復元する方法三選

Windows11搭載のパソコンで削除してしまったデータを復元する方法三選

Windowsで削除してしまったデータを復元できますか?もちろんです!本記事では、Windows11搭載のパソコンでデータを復元する方法を三つ詳しく紹介しますので、困っている方、ぜひお読みになってください。

Windows 11で固定キーをオン/オフにする方法

Windows 11で固定キーをオン/オフにする方法

Windows 11 でスティッキー キーをオン/オフにする方法 スティッキー キーを使用すると、PC キーボードが使いやすくなります。Windows 11 でスティッキー キーをオンまたはオフにする方法は次のとおりです。

Windows モジュール インストーラーとは何ですか?

Windows モジュール インストーラーとは何ですか?

Windows モジュール インストーラーとは何ですか?、Windows モジュール インストーラーは多くのシステム リソースを消費することがあります。Windows モジュール インストーラーは重要ですか?

Windows 10で音量を上げる方法

Windows 10で音量を上げる方法

Windows 10 で音量を上げる方法、コンピューターの音量を最大レベルまで上げる方法は? WebTech360 で Windows 10 コンピューターの音量を増やす方法を学びましょう

Windows 11 インストール アシスタントを使用して Windows 11 をインストールする方法

Windows 11 インストール アシスタントを使用して Windows 11 をインストールする方法

Windows 11 インストール アシスタントを使用して Windows 11 をインストールする方法。Windows 11 インストール アシスタントは、コンピューターを Windows 11 にアップグレードする最良の方法の 1 つです。

Windows 11で起動音を消す方法

Windows 11で起動音を消す方法

Windows 11で起動音を消す方法、PCの起動音は気になりませんか?次に、以下の Windows 11 を実行している PC の起動音をオフにする方法を参照してください。