Chrome で HTML コードを表示する方法
Web ページのコンポーネントとは何か気になりますか? ウェブサイトのフォント サイズや色を変更する方法を知りたいですか? Web ページの HTML コードを見ることで、これらのことを行うことができます。
このチュートリアルでは Chrome で Web ページの HTML コードを表示する方法を紹介します。
Contents
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 プロジェクトに基づいて構築されています。 この互換性は、一般的なブラウザーでユーザーが任意の Web サイトの HTML コードを表示できる HTML 領域にまで及びます。
HTML コードは 2 つの方法で表示できます。
ページのソースを表示するために使用されます。
この方法は簡単です。
- Chrome を開き、HTML ソース コードを表示するページに移動します。
- ページを右クリックして[ページ ソースの表示]を選択するか、キーボードの Ctrl + U を押して新しいタブでソース コードを開きます。
ソースコードが新しいタブに表示されます。 スクロールして、そのページの HTML マークアップを表示できます。
開発者ツールの使用
Google Chrome の開発者ツールを使用してページのソース コードを確認するには、次の手順に従います。
- Google Chrome を開き、確認したい Web ページに移動します。
- キーボードで Ctrl + Shift + I を押します。 表示している Web ページの横にある Dock に、開発者ツール ペインが開きます。
- ペインの上部にある[要素]タブをクリックします。 これにより、Web ページの HTML ソース コードが表示されます。
- ページのソース コードを確認できるようになりました。 要素を折りたたむにはタグ名の横にある三角形をクリックします。 コンポーネントについて詳しく知るにはコンポーネントを右クリックし、「検査」を選択します。
これは HTML ページに最適であることに注意してください。 他の種類の Web ページのソース コードを表示することはできますが、書式設定が読みにくい場合があります。
Mac の Chrome で Web ページの HTML コードを表示する方法
あなたがウェブ開発者なら Web ページの HTML コードを表示できることは重要です。 これにより、ページの構造を確認し、潜在的な問題をトラブルシューティングできます。 幸いなことに、Mac の Chrome では簡単に行うことができます。次の手順に従ってください。
- Chrome を開き、HTML コードを表示する Web ページに移動します。
- ページを右クリックし、「チェック」を選択します。
- 画面の下部に新しいペインが開き、HTML コードが表示されます。
- You can also click on a specific element in the HTML code to see how it’s format on the page. たとえば、要素を選択すると、要素に適用されている CSS スタイルを確認できます。 次に、開いたペインの[スタイル]タブをクリックします。
- ペインを閉じるには、右上隅の「X」をクリックします。
または、Chrome 開発者ツールを使用してソース コードを表示することもできます。
- Google Chrome を開き、確認したい Web ページに移動します。
- ブラウザの右上隅にあるメニュー アイコン (3 つのドット) をクリックします。 ドロップダウン メニューから[その他のツール]と[開発者ツール]を選択します。
- 画面下部に開発者ツールパネルが開くので、ペイン上部の「Elements」を選択します。
- 現在のページの 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」ボタンを押すと、ウェブページの HTML コードが Chrome に表示されます。
開発者ツールの使用
Chrome デベロッパー ツールは iOS でも利用できますが、有効化するには PC とは異なる一連の手順が必要です。
- 画面の右上隅にある 3 つのドットをタップし、[設定]を選択します。
- 下にスクロールして「詳細設定」をタップし、次のトグルを有効にします “開発者ツール”
- ページの空白の領域を長押しし、[要素の検査]を選択します。これにより、そのページの HTML コードを含むサイド パネルが開きます。
Android アプリの Chrome で Web ページの HTML コードを表示する方法
Android フォンで Chrome アプリを使用している場合、Web ページの HTML コードを表示することができます。 これは、ページの問題をトラブルシューティングしようとしている場合や、ページがどのように構成されているかを確認したい場合に役立ちます。 Android フォンの Chrome で Web ページの HTML コードを表示するには、次の手順に従います。
- Android で Chrome を開きます。
- 「view-source:」と入力してから、ソース コードを表示するページの URL を入力します。たとえば、www.google.com のソース コードを表示するには、「view-source:www.google.com」と入力します。 Chrome のアドレス バーに表示されます。
これにより、Chrome のビルトイン デベロッパー ツール インターフェースでそのページの HTML コードが開きます。そこから、必要に応じてコードを表示および編集できます。 この方法は、表示しようとしている Web サイトがソース コードへのアクセスを許可している場合にのみ機能することに注意してください. ソース コードへのアクセスが許可されていない場合は、エラー メッセージ以外は何も表示されません.
iPad の Chrome で Web ページの HTML コードを表示する方法
Chrome on iPad アプリを使用すると、ウェブページの HTML コードを簡単に表示できます。 それは簡単です次の手順に従ってください。
- Chrome を開き、「view-source:」と入力してから、表示するページの URL を入力します。 www.alphr.com の場合、Chrome のアドレス バーに「view-source:www.alphr.com」と入力する必要があります。
- 「行く」ボタンを押す
これにより、ページのソース コードが Chrome 内の新しいタブに読み込まれます。そこから、必要に応じてコードを保存または共有できます。
ソース コードは、ページをまとめる接着剤です。
HTML はあらゆる Web サイトの基盤です。 ページがブラウザーにロードされたときに訪問者が見る構造とコンテンツを提供します。
ページの最終的な外観は CSS やその他のスタイル言語によって決定される場合がありますが、HTML コードはページの基礎となる構造とコンテンツを定義します。 一部の変更によりページが破損する可能性があるため、ソース コードを表示または変更する際には、HTML を十分に理解することが重要です。
また、HTML コードを表示しているときに役立つ場合があることにも注意してください。 コードに加えた変更は、実際の Web ページには反映されません。 サイト管理者によって公開された変更のみが訪問者に表示されます。
Web ページの HTML コードを調べてみましたか? 任意の方法を使用してこのチュートリアルで言及されていますか？ どうだった？
コメント欄でお知らせください。
