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