Google ChromeでHTMLソースを表示する方法

知っておくべきこと

Web ページを右クリックして選択します ページのソースを表示 。
ショートカット: を押します Ctrl + で (Windows PC) または指示 + オプション + で（マック）。
Chrome の開発者ツールを使用するには、 メニュー (3つの点) > その他のツール > 開発者ツール 。

この記事では、Google Chrome Web ブラウザで Web サイトの HTML ソースコードにアクセスする方法と、Chrome の開発者ツールにアクセスして使用する方法について説明します。サイトのソースコードを表示することは、初心者が HTML を学習する優れた方法です。

Chrome でソースコードを表示する

では、Web サイトのソースコードを表示するにはどうすればよいでしょうか?ここでは、Google Chrome ブラウザを使用してこれを行う手順を段階的に説明します。

を開きます Google Chrome ウェブブラウザ (持っていない場合 Google Chromeがインストールされている、これは無料でダウンロードできます）。
に移動します。 調べたいWebページ 。
右クリック ページ そして表示されるメニューを見てください。そのメニューから、 ページのソースを表示 。
そのページのソースコードがブラウザの新しいタブとして表示されます。
または、次のキーボードショートカットを使用することもできます。 Ctrl + で PC 上でをクリックすると、サイトのソースコードが表示されたウィンドウが開きます。 Mac では、このショートカットは次のとおりです。指示 + オプション + で。

ヒラリー・アリソン/ライフワイヤー

すべての Steam ゲームを別のドライブに移動する方法

Chromeの開発者ツールを使用する

シンプルなものに加えて、ページのソースを表示Google Chrome が提供する優れた機能を利用することもできます。開発者ツールサイトをさらに深く掘り下げることができます。これらのツールを使用すると、HTML だけでなく、その HTML ドキュメント内のビュー要素に適用される CSS も表示できます。

Chrome の開発者ツールを使用するには:

開ける グーグルクローム 。
案内する 調べたいWebページ 。
を選択 三点メニュー ブラウザウィンドウの右上隅にある
メニューからカーソルを合わせます その他のツール そして選択してください 開発者ツール 表示されるメニューで。
ウィンドウが開き、ペインの左側に HTML ソースコードが表示され、右側に関連する CSS が表示されます。
または、右クリックすると、 Web ページ内の要素 そして選択します 検査する 表示されるメニューから、Chrome の開発者ツールがポップアップし、HTML 内で選択した特定の部分が、右側に示されている対応する CSS とともに強調表示されます。サイトの特定の部分について詳しく知りたい場合に非常に役立ちます。
iPhoneを知らずにスナップチャットでスクリーンショットを撮る方法

Mac で要素を検査する方法

ソースコードの閲覧は合法ですか?

長年にわたり、多くの新人 Web デザイナーが、サイトのソースコードを表示して教育、そして最終的には仕事に使用することが許容されるかどうか疑問に思ってきました。サイトのコードを大規模にコピーし、それを Web サイト上で自分のものとして偽装することは確かに容認できませんが、そのコードを学習の出発点として使用することで、実際にこの業界で多くの進歩が見られます。

この記事の冒頭で述べたように、今日、サイトのソースを見て何かを学ばなかった現役の Web プロフェッショナルを見つけるのは難しいでしょう。はい、サイトのソースコードを見ることは合法です。そのコードをリソースとして使用して、同様のものを構築することも安全です。コードをそのまま使用して仕事として渡すと、問題が発生し始めます。

結局のところ、Web プロフェッショナルは互いに学び合い、自分たちが見てインスピレーションを受けた作品を改善することが多いため、ためらわずにサイトのソースコードを表示し、学習ツールとして使用してください。

HTML だけではない

覚えておくべきことの 1 つは、ソースファイルは非常に複雑になる可能性があるということです (閲覧している Web サイトが複雑になればなるほど、そのサイトのコードも複雑になる可能性が高くなります)。ページを構成する HTML 構造に加えて、サイトの外観を決定する CSS (カスケードスタイルシート) も存在します。さらに、今日の多くの Web サイトには、HTML とともにスクリプトファイルが組み込まれています。

複数のスクリプトファイルが含まれる可能性があります。実際、それぞれがサイトのさまざまな側面に力を与えています。率直に言って、特にこれを初めて行う場合、サイトのソースコードは圧倒されるように思えるかもしれません。そのサイトで何が起こっているのかをすぐに理解できなくても、イライラしないでください。 HTML ソースの表示は、このプロセスの最初のステップにすぎません。少し経験を積めば、これらすべての要素がどのように組み合わされてブラウザーに表示される Web サイトを作成するのかがよりよく理解できるようになります。コードに慣れるにつれて、そこからさらに多くのことを学ぶことができるようになり、それほど難しく感じなくなるでしょう。

よくある質問

Chrome で HTML コードを編集するにはどうすればよいですか?
を押して Chrome で開発者ツールを開きます Ctrl （または指示 Mac の場合) + シフト + I 。そこから、を押します Ctrl ( 指示 Mac の場合) +O をクリックして、編集する保存済みソースファイルを選択して開きます。
ソースの表示が無効になっている場合、Chrome でページのソースコードを表示するにはどうすればよいですか?
Web サイトで [ソースの表示] オプションが無効になっている場合でも、内部を確認できる場合があります。ブラウザウィンドウの上部から選択します ビュー > 開発者 > ソースを表示 , これにより、Web ページのソースコードがプルアップされます。
Android デバイスを使用して Chrome でサイトのソースコードを表示するにはどうすればよいですか?
デバイスの Chrome アプリを使用して表示したい Web サイトに移動し、ブラウザのアドレスバーを選択します。テキストカーソルを左端 (URL の前) に移動し、次のように入力します。 ソースの表示 を押してから、入力または選択します行く。
Spotifyをdiscordに接続できませんでした