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



by

Web業界に不慣れな場合でも、ベテランでも、さまざまなWebページのHTMLソースを表示することは、キャリアを通じて何度も行う可能性があります。 Chromeも例外ではありません。

Webデザインの本を読んだり、専門家の会議に出席したりすることに加えて、サイトのソースコードを表示することは、初心者がHTMLを学ぶための優れた方法です。

Chromeでソースコードを表示

GoogleChromeブラウザを使用してこれを行うためのステップバイステップの手順は次のとおりです。

  1. Video Cloud Studioで Google Chrome Webブラウザー （Google Chromeがインストールされていない場合、これは無料でダウンロードできます）。

  2. に移動します 調べたいウェブページ.

  3. 右クリックする ページ 表示されるメニューを見てください。 From that menu, clickそのメニューから、をクリックします ページのソースを表示.

  4. そのページのソースコードがブラウザに新しいタブとして表示されます。

  5. または、のキーボードショートカットを使用することもできます CTRL + U PCで、サイトのソースコードが表示されたウィンドウを開きます。 Macでは、このショートカットは コマンド+オプション+ U.

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

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

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

  1. 開いた Google Chrome.

  2. 案内する 調べたいウェブページ.

  3. 現在地に最も近い 三点メニュー ブラウザウィンドウの右上隅にあります。

  4. メニューから、カーソルを合わせます その他のツール それから、 開発者ツール 表示されるメニューで

  5. ペインの左側にHTMLソースコードを、右側に関連するCSSを表示するウィンドウが開きます。

  6. または、右クリックすると Webページの要素 をクリックして 検査する 表示されるメニューから、Chromeの開発者ツールがポップアップ表示され、HTMLで選択した特定の部分が強調表示され、対応するCSSが右側に表示されます。 サイトの特定の部分について詳しく知りたい場合は、非常に役立ちます。

ソースコードの表示は合法ですか？

何年にもわたって、多くの新しいWebデザイナーが、サイトのソースコードを表示して、それを教育や最終的には彼らの仕事に使用することが許容できるかどうかを疑問視してきました。 サイトのコードを卸売りでコピーし、それをWebサイトで自分のものとして渡すことは確かに受け入れられませんが、そのコードを学習の出発点として使用することは、実際にはこの業界でどれだけの進歩があったかです。

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

結局、ウェブの専門家はお互いから学び、彼らが見たり刺激を受けたりする仕事を改善することが多いので、サイトのソースコードを見て、それを学習ツールとして使用することを躊躇しないでください。

HTMLだけではありません

覚えておくべきことのXNUMXつは、ソースファイルが非常に複雑になる可能性があることです（表示しているWebサイトが複雑になるほど、そのサイトのコードは複雑になる可能性があります）。 ページを構成するHTML構造に加えて、そのサイトの外観を決定するCSS（カスケードスタイルシート）もあります。 さらに、今日の多くのWebサイトには、HTMLとともに含まれるスクリプトファイルが含まれています。

HTMLソースの表示は、このプロセスの最初のステップにすぎません。 少しの経験で、これらすべての要素がどのように組み合わされて、ブラウザーに表示されるWebサイトを作成するかをよりよく理解できるようになります。 コードに慣れるにつれて、コードからより多くを学ぶことができるようになり、それほど気が遠くなるようなことはないように思われます。