ウェブページのHTMLソースを表示することは、HTMLを学ぶ最も簡単な（しかも最も効果的な）方法の1つです。特に、業界を始めようとしている新しいウェブのプロフェッショナルにとっては便利です。ウェブサイト上に何かが表示され、それがどのように行われたか知りたい場合は、そのサイトのソースコードをご覧ください。
ウェブサイトのレイアウトが気に入っている場合、そのレイアウトがどのように達成されたかを見るためにソースを表示すると、自分の仕事を学び、改善するのに役立ちます。長年にわたり、多くのWebデザイナーや開発者は、見ているWebページのソースを見るだけで、非常に多くのHTMLを学んできました。初心者がHTMLを習得し、経験豊富なWebプロフェッショナルが、新しいテクニックがサイトにどのように適用されているかを確認するのに最適な方法です。
ソースファイルは非常に複雑になる可能性があることに注意してください。ページのHTMLマークアップに加えて、おそらく、そのサイトの外観と機能を作成するために使用されるCSSやスクリプトファイルがたくさんあるので、すぐに何が起こっているのか分からなければ、 HTMLソースの表示は、最初のステップにすぎません。その後、Chris PederickのWeb Developer拡張機能のようなツールを使用して、CSSやスクリプトを見たり、HTMLの特定の要素を調べたりすることができます。
Safariブラウザを使用している場合は、ページのソースコードを表示して作成方法を確認する方法があります。
SafariでHTMLソースを表示する方法
-
Safariを開きます。
-
調べたいWebページに移動します。
-
クリックしてください 開発する メニューを表示します。
現像メニューが表示されていない場合は、詳細設定セクションの設定に移動し、メニューバーの現像メニューを選択します。
-
クリック ページソースを表示する。これは、あなたが見ているページのHTMLソースでテキストウィンドウを開きます。
ヒント
- ほとんどのWebページでは、ページを右クリックして（画像には表示されません）、「ページソースを表示」を選択してソースを表示することもできます。これは、環境設定で現像メニューが有効になっている場合にのみ表示されます。
- Safariには、HTMLソースを表示するためのキーボードショートカットもあります。コマンドとオプションキーを押しながらU（Cmd-Opt-U）を押します。
ソースコードを法的に表示していますか？
サイトのコードの卸売りをコピーしてサイト上で自分のものとしてそれを渡すことは確かに受け入れられません。そのコードを学ぶための踏み台として使用することは、実際にこの業界でどのように多くの進歩が行われたかです。実際、サイトのソースを見て何かを学んでいない現役のWebプロフェッショナルを今日見つけるのは難しいでしょう。
結局のところ、Webの専門家はお互いに学び、よく見る作業やインスピレーションを受けた作業を改善するので、サイトのソースコードを表示して学習ツールとして使用することを躊躇しないでください。
