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

Chromeのデベロッパーツールを使用する

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

Chromeのデベロッパーツールを使用するには：

1. Google Chromeを開きます 。

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

3. 3ドットメニューを選択します ブラウザウィンドウの右上隅にあります。

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

   

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

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

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

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

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

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

HTMLだけではありません

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

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