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 ⋙

Leave a Comment

Windows 11でインターネットオプションを開く方法

Windows 11でインターネットオプションを開く方法

Windows 11 では、インターネット オプションを通じてブラウジング エクスペリエンスをカスタマイズするためのさまざまなオプションが提供されます。

コンピューターでCapcutを使用するための最新の手順

コンピューターでCapcutを使用するための最新の手順

Capcut は、ユーザーが簡単に使用できるように、以前の中国語バージョンに代えてコンピューター上で Capcut の英語バージョンをリリースしました。英語バージョンでは、エミュレーター ソフトウェアを使用してコンピューターに Capcut をインストールする必要があります。

Windowsパソコンを元の状態に戻す6つの方法

Windowsパソコンを元の状態に戻す6つの方法

Windows コンピュータをリセットすることは、Windows を元の通常の状態に戻す最も速くて簡単な方法です。 Windows は現在非常に遅く動作し、ウイルスに感染しています。これにより、Windows が完全にクリーンアップされ、最適なパフォーマンスが回復されます。この記事では、コンピューターの Windows をリセットする 4 つの方法を紹介しますので、参考にしてください。

Windows 11 タスクバーのアプリケーション メニューをオフにする方法

Windows 11 タスクバーのアプリケーション メニューをオフにする方法

Windows 11 ビルド 22635.4000 以降、タスクバーにアプリケーション メニューを表示するためのホバー機能が追加されました。この機能を使用したくない場合は、以下の記事を参照してオフにしてください。

Windows 11のタスクバーに複数の時計を追加する方法

Windows 11のタスクバーに複数の時計を追加する方法

Windows 11 のタスクバーで複数のタイムゾーンをすぐに表示できます。 Windows 11 タスクバーに複数のタイムゾーンを追加する方法は次のとおりです。

システムの回復を簡単にする7つのWindows回復オプション

システムの回復を簡単にする7つのWindows回復オプション

Windows コンピューターはこれまで以上に信頼性が高くなっていますが、それでも組み込みの回復オプションが有効になっていることを確認し、そのオプションを理解しておく必要があります。

今すぐ変更すべきWindowsのプライバシー設定9つ

今すぐ変更すべきWindowsのプライバシー設定9つ

Windows コンピューターはユーザーに関するあらゆる種類のデータを収集します。これはユーザーエクスペリエンスを向上させることを目的としていますが、プライバシーに関する懸念も生じる可能性があります。

タスクバーからWindowsセキュリティアイコンが消える問題を修正する方法

タスクバーからWindowsセキュリティアイコンが消える問題を修正する方法

コンピュータで Windows セキュリティ アイコンがタスク バーから消えるエラーが発生している場合は、以下の記事を参照してください。

Windows 11でアンインストールされたプログラムを表示する方法

Windows 11でアンインストールされたプログラムを表示する方法

Windows 11 には、イベント ビューアーを介してコンピューター上のアンインストールされたプログラムを追跡する機能があります。 Windows 11でアンインストールされたプログラムを表示する手順は次のとおりです。

マイクロソフト:Windows 11のTPM 2.0は必須であり、交渉の余地はない

マイクロソフト:Windows 11のTPM 2.0は必須であり、交渉の余地はない

3年以上前、マイクロソフトがWindows 11を発表したとき、このオペレーティングシステムはすぐに大きな論争を巻き起こしました。

MacでWindows 11の起動可能なUSBを作成する2つの方法

MacでWindows 11の起動可能なUSBを作成する2つの方法

Mac で Windows 11 の起動可能な USB を作成するのは、Windows PC で作成するよりも間違いなく難しいですが、不可能ではありません。

今すぐ Windows 11 を更新すべきでしょうか?

今すぐ Windows 11 を更新すべきでしょうか?

Windows 11は2021年10月5日に正式にリリースされました。これまでのWindows 10の主要なアップグレードとは異なり、Microsoftは今回はユーザーにアップグレードを推奨していません。

Windows 11でBitLockerを無効にする方法

Windows 11でBitLockerを無効にする方法

この記事では、Windows 11 で BitLocker 暗号化を無効にする方法を説明します。Windows 11 で BitLocker を無効にすると、デバイスとデータのセキュリティが低下する可能性があるので、無効にする際には注意してください。

Windowsで入力信号範囲外エラーを修正する方法

Windowsで入力信号範囲外エラーを修正する方法

Windows PC に外部ディスプレイを接続すると、入力信号範囲外エラーが発生する場合があります。このエラーは通常、高リフレッシュ レートのモニターを低エンドのグラフィック デバイスに接続した場合に発生します。

Windows 画面にウィンドウをピン留めする 4 つの方法

Windows 画面にウィンドウをピン留めする 4 つの方法

任意のウィンドウを常に他のウィンドウの上に固定する(常に最前面に表示)方法がわからない場合は、すぐにこの記事をお読みください。