Chrome で HTML コードを表示する方法
Web ページを構成する要素に興味がありますか? ウェブサイトのフォント サイズや色を変更する方法を知りたいですか? Web ページの HTML コードを表示することで、これらすべてのことを実行できます。
このチュートリアルでは、Chrome でウェブページの HTML コードを表示する方法を紹介します。
Chrome での HTML コードの表示
HTML で記述する場合、ソース コードは、Web ページの構造とコンテンツを定義するために使用される一連のタグと属性です。
ソース コードは Web ブラウザーによって読み取られ、画面に表示されるグラフィカルな Web ページに変換されます。Web ページのルック アンド フィールを定義するだけでなく、ソース コードを使用して、ポップアップ ウィンドウ、フォーム、ドロップダウン メニューなどの対話機能を追加することもできます。
平均的なインターネット ユーザーは、Web ページの HTML ソース コードを表示する必要がないかもしれませんが、表示したい理由がいくつかあります。
開発者にとって、ソース コードを表示すると、ページがどのように構成されているかを理解し、どのスタイル要素とスクリプト要素が使用されているかを判断するのに役立ちます。デザイナーにとって、他のデザイナーが効果的なレイアウトを作成するために HTML をどのように使用しているかを確認することは有益です。
場合によっては、ユーザーがソース コードを表示してエラーをトラブルシューティングしたり、特定の Web サイトや Web アプリケーションのしくみについて詳しく知りたい場合もあります。理由が何であれ、Chrome で HTML ソース コードを表示するのは比較的簡単なプロセスです。
Windows PC の Chrome で Web ページの HTML コードを表示する方法
Windows オペレーティング システムは、Chrome の最も互換性の高いシステムの 1 つです。Chrome は、Microsoft が主要な貢献者であるオープンソースの Chromium プロジェクトの上に構築されています。この互換性は HTML の領域にまで及び、一般的なブラウザを使用してユーザーは任意の Web サイトの HTML コードを表示できます。
HTML コードは 2 つの方法で表示できます。
ページソースの表示の使用
この方法は簡単です。
- Chrome を開き、HTML ソース コードを表示するページに移動します。
- ページを右クリックして [ページ ソースの表示] を選択するか、キーボードで Ctrl + U を押して新しいタブでソース コードを開きます。
ソース コードが新しいタブに表示され、スクロールしてそのページの HTML マークアップを表示できます。
開発者ツールの使用
Google Chrome の開発者ツールを使用して Web ページのソース コードを検査するには、次の手順に従います。
- Google Chrome を開き、検査する Web ページに移動します。
- キーボードで Ctrl + Shift + I を押します。開発者ツール ペインは、表示している Web ページの横にある Dock で開きます。
- ペインの上部にある「要素」タブをクリックします。これにより、Web ページの HTML ソース コードが表示されます。
- ページのソース コードを確認できるようになりました。要素を折りたたむには、タグ名の横にある三角形をクリックします。コンポーネントに関する詳細情報を表示するには、コンポーネントを右クリックして [検査] を選択します。
この方法は HTML ページに最適であることに注意してください。他の種類の Web ページのソース コードを表示することは可能ですが、書式設定が読みにくい場合があります。
Mac の Chrome で Web ページの HTML コードを表示する方法
Web 開発者にとって、Web ページの HTML コードを表示できることは重要です。これにより、ページの構造を確認し、発生する可能性のある問題をトラブルシューティングできます。幸いなことに、Mac 上の Chrome では簡単に実行できます。次の手順に従ってください。
- Chrome を開き、HTML コードを表示する Web ページに移動します。
- ページを右クリックし、「検査」を選択します。
- 画面の下部に新しいペインが開き、HTML コードが表示されます。
- HTML コード内の特定の要素をクリックして、ページ上でどのようにスタイル設定されているかを確認することもできます。たとえば、どの CSS スタイルが要素に適用されているかを確認するには、要素を選択し、開いたペインの [スタイル] タブをクリックします。
- ペインを閉じるには、右上隅の「X」をクリックします。
または、Chrome デベロッパー ツールを使用してソース コードを表示することもできます。
- Google Chrome を開き、検査する Web ページに移動します。
- ブラウザの右上隅にあるメニュー アイコン (3 つのドット) をクリックし、ドロップダウン メニューから [その他のツール] と [開発者ツール] を選択します。
- 画面下部に開発者ツールパネルが開きます。ペインの上部にある「要素」を選択します。
- 現在のページの HTML コードが要素パネルに表示されます。パネルのさまざまなオプションを使用して、必要に応じてコードを検査およびデバッグできます。
数回クリックするだけで、Mac の Chrome で任意の Web ページの HTML コードを簡単に表示できます。これは、Web 開発の問題をトラブルシューティングしようとしている場合や、特定の Web サイトがどのように構築されているかを詳しく調べたい場合に役立ちます。
iPhone アプリの Chrome で Web ページの HTML コードを表示する方法
iPhone を使用している場合、Chrome で任意のページの HTML コードを表示するには、次の 2 つの方法があります。
URL の微調整
URL を少し調整するだけで、任意のページの HTML コードを簡単に表示できます。
- Chrome を開き、HTML コードを表示する Web ページに移動します。
- アドレス バーを 1 回タップして、編集モードを開始します。
- カーソルを URL の先頭に移動します。
- 「View-source」と入力し、「Go」ボタンを押します。Web ページの HTML コードが Chrome に表示されます。
開発者ツールの使用
Chrome Developer Tools は iOS でも利用できますが、PC と比較して起動するには別の一連の手順が必要です。
- 画面の右上隅にある 3 つのドットをタップし、[設定] を選択します。
- 下にスクロールして「Advanced」をタップし、「Developer tools」の横にあるトグルを有効にします。
- ページの空白部分を長押しして、「要素を検査」を選択します。これにより、そのページの HTML コードを含むサイド パネルが開きます。
Android アプリの Chrome で Web ページの HTML コードを表示する方法
Android フォンで Chrome アプリを使用しているときに、Web ページの HTML コードを表示したい場合があります。これは、ページの問題をトラブルシューティングしようとしている場合や、ページがどのように構成されているかを確認したい場合に役立ちます。Android フォンの Chrome で Web ページの HTML コードを表示するには、次の手順に従います。
- Android で Chrome を開きます。
- 「view-source:」と入力し、その後にソース コードを表示するページの URL を入力します。たとえば、www.google.com のソース コードを表示する場合は、Chrome のアドレス バーに「view-source:www.google.com」と入力します。
これにより、Chrome の組み込みの開発者ツール インターフェイスでそのページの HTML コードが開きます。そこから、必要に応じてコードを表示および編集できます。この方法は、表示しようとしている Web サイトでソース コードへのアクセスが許可されている場合にのみ機能することに注意してください。そうでない場合、エラー メッセージ以外は何も表示されません。
iPad の Chrome で Web ページの HTML コードを表示する方法
iPad アプリの Chrome を使用すると、ウェブページの HTML コードを簡単に表示できます。次の手順に従ってください。
- Chrome を開き、「view-source:」と入力してから、表示するページの URL を入力します。たとえば、www.alphr.com のソース コードを表示するには、Chrome のアドレス バーに「view-source:www.alphr.com」と入力する必要があります。
- 「行く」ボタンを押してください。
これにより、ページのソース コードが Chrome 内の新しいタブに読み込まれます。そこから、必要に応じてコードを保存または共有できます。
ソースコードはページをつなぎ合わせる接着剤です
HTML はあらゆる Web サイトの基盤です。訪問者がブラウザでページを読み込んだときに表示される構造とコンテンツを提供します。
ページの最終的な外観は CSS やその他のスタイリング言語によって決定される場合がありますが、HTML コードによってページの基本構造とコンテンツが決定されます。一部の変更により、ページが破損する可能性があります。このため、ソース コードを表示または変更する際には、HTML を十分に理解していることが重要です。
また、HTML コードを表示すると役立つ場合もありますが、コードに加えた変更は実際の Web ページには反映されないことに注意してください。サイトの管理者によって発行された変更のみが訪問者に表示されます。
このチュートリアルで説明した方法のいずれかを使用して、Web ページの HTML コードを表示しようとしましたか? どうだった？
コメント欄でお知らせください。
コメントを残す