あなたがウェブ産業に慣れていなくても、経験豊富なベテランであれ、異なるウェブページのHTMLソースを見ることは、あなたのキャリアの間に何度もやりそうなことです。
ウェブデザインを初めて使う人にとっては、サイトのソースコードを表示することは、特定のことがどのように行われているかを知る最も簡単な方法の1つであり、その作業から学び、自分の仕事で特定のコードやテクニックを使うことができます。今日働いているWebデザイナー、特に業界の初期からそれをしてきた人たちのように、彼らが見て興味を持ったWebページのソースを見るだけでHTMLを学んでもらうことをお勧めしますによって。ウェブデザインブックを読んだり、専門会議に出席することに加えて、サイトのソースコードを見ることは、初心者がHTMLを学ぶのに最適です。
HTML以外のもの
覚えておくべきことの1つは、ソースファイルが非常に複雑になる可能性があることです（また、表示しているWebサイトが複雑なほど、サイトのコードが複雑になる可能性が高くなります）。表示しているページを構成するHTML構造に加えて、そのサイトの外観を指示するCSS（カスケードスタイルシート）もあります。さらに、今日の多くのWebサイトでは、HTMLと共にスクリプトファイルが含まれています。
実際には、複数のスクリプトファイルが含まれている可能性があります。実際には、それぞれがサイトのさまざまな面を強化しています。率直に言って、サイトのソースコードは圧倒的に思えるかもしれません。すぐにそのサイトで何が起こっているのかわからない場合は、不満を感じないでください。 HTMLソースの表示は、このプロセスの最初のステップにすぎません。少しの経験で、あなたはあなたのブラウザに表示されているウェブサイトを作成するためにこれらのすべての部分がどのように適合するかをよりよく理解し始めます。あなたがコードをよく知っているようになると、より多くのことを学ぶことができ、あなたにはそれほど難しいことはありません。
では、ウェブサイトのソースコードをどのように見ていますか？ Google Chromeブラウザを使用するための手順を以下に示します。
ステップバイステップの手順
-
オープン Google Chromeウェブブラウザ （Google Chromeをインストールしていない場合は、無料でダウンロードできます）。
-
あなたは あなたが調べたいウェブページ.
-
右クリック ページ 表示されるメニューを見てください。そのメニューから、をクリックします。 ページソースを表示する.
-
そのページのソースコードがブラウザの新しいタブとして表示されます。
-
または、次のキーボードショートカットを使用することもできます。 CTRL + U PC上でサイトのソースコードが表示されたウィンドウを開きます。 Macでは、このショートカットは Command + Option + U.
開発者ツール
単純なものに加えて ページソースを表示する Google Chromeが提供する機能を使用すると、優れた開発者ツールを活用して、サイトをさらに深く掘り下げることもできます。これらのツールを使用すると、HTMLだけでなく、そのHTMLドキュメントのビュー要素に適用されるCSSも表示できます。
Chromeのデベロッパーツールを使用するには：
-
開いた グーグルクローム.
-
案内する あなたが調べたいウェブページ.
-
クリック 3行のアイコン ブラウザウィンドウの右上隅に表示されます。
-
メニューからカーソルを置いて その他のツール をクリックします。 開発者ツール メニューに表示されます。
-
これにより、ウィンドウの左側にHTMLソースコードが表示され、右側に関連するCSSが表示されます。
-
また、右クリックした場合 Webページの要素 選択 検査する 表示されるメニューから、Chromeのデベロッパーツールがポップアップし、選択した正確な要素がHTMLにハイライトされ、対応するCSSが右側に表示されます。これは、サイトの特定の部分がどのように細工されたかについてもっと知りたい場合に役立ちます。
ソースコードを法的に表示していますか？
長年にわたり、私たちは多くの新しいWebデザイナーに、サイトのソースコードを見て、それを教育用に、そして最終的には彼らが行っている作業のために使用することが受け入れられるかどうか疑問に思ってきました。サイトのコードの卸売りをコピーしてサイト上で自分のものとしてそれを渡すことは確かに受け入れられません。そのコードを学ぶための踏み台として使用することは、実際にこの業界でどのように多くの進歩が行われたかです。
この記事の冒頭で述べたように、サイトのソースを参照して何かを学んだことのない現役のWebプロフェッショナルを今日見つけるのは難しいでしょう。はい、サイトのソースコードを表示することは合法です。そのコードをリソースとして使用して、同様のものを構築することもできます。コードをそのまま使用して作業を進めていくうちに、問題が発生し始めます。
結局のところ、Webの専門家はお互いに学び、よく見る作業やインスピレーションを受けた作業を改善するので、サイトのソースコードを表示して学習ツールとして使用することを躊躇しないでください。
