ホームページを制作するときに使うプログラム言語のことをhtmlといいます。

ライバルサイトやきれいなレイアウトのホームページをみていると、どのようなhtmlソースで書かれているのか調べてみたいことがありますよね。

初心者のかたでも簡単に、そのhtmlソースをサクッとみることができます。

ページのソースを表示

ブラウザMicrosoft EdgeやGoogle chromeを使っている前提で説明します。

1. htmlをみたいホームページにアクセスします
2. そこで右クリック＞「ページのソースを表示」コマンドをクリック

そうすると新しいウィンドウが開いて、そこにhtmlの記述が表示されます。

※ショートカットキーは ctrl+U

※プログラム言語で書かれているファイルのことを「ソースファイル」といいます。ホームページの言語htmlで書かれているファイルをhtmlソースといいます。

ページ内検索を使って詳しくみる

表示されたhtmlソースはコードとテキストだけの羅列でぱっとみ見づらかったりします。

ブラウザのページ内検索コマンドを使い、任意のhtmlタグを検索したり、気になった部分のテキストで検索することで見たかった部分を探しやすくなります。

スタイルシートと合わせて立体的にみてみる

ホームページはhtmlで見出しや段落など文書構造をマークアップするもの、スタイルシートはレイアウトやデザインをするものです。

ただ「ページのソースを表示」させるだけでなく、スタイルシートはどのように記述されているのかを同時にみることができるツールも用意されています。

1. htmlをみたいホームページにアクセスします
2. そこで右クリック＞「検証」もしくは「開発者ツールで調査する」コマンドをクリック

そうすると同じウィンドウ内で表示が切り替わり、左にホームページ画面、中央にそのページのhtmlソース、そして右にはスタイルシートが表示されます。

このツールを使うことで、htmlソースだけでなくそこで使われているスタイルシートでの記述もみれるのでより立体的に分析することができます。

参考になれば幸いです。