スポンサーリンク

HTML初心者は「かたまり」を意識しよう。デベロッパーツールも超便利!

Webページ

私がHTMLを勉強し始めたとき、要素という言葉に少し苦手意識を持っていましたが、要素が単なる「かたまり」であることを知ってからはその苦手意識も無くなりました。

HTMLでWebページに配置するかたまりを作る

当ブログを参考に見ていきましょう。

Webページの要素

上の図のように、1ページがいくつかのかたまりからできていることがわかります。本当はもっとたくさんのかたまりがありますが、わかりやすく大きく分けてみました。

かたまりを作るのに超便利なdiv要素

かたまりを作る汎用的な要素としてdiv要素があります。とりあえず <div>・・・・</div> とHTMLに記述してしまえば一つのかたまりはできるんです。
しかし上の図のようにヘッダーやフッターなど、それぞれのかたまりには役割があります。ヘッダーならタイトルやナビゲーションを、フッターならコピーライトを置いたりしますよね。

セマンティックWebを意識してdiv要素以外も使う

そこでHTML5から新たに登場したheader要素footer要素を使います。ヘッダーであれはdiv要素ではなくheader要素にすることで、Googleなどの検索エンジンは「このかたまりはヘッダーなんだな」と認識してくれます。ここをdiv要素にしてしまうと検索エンジンは単なるかたまりとしか認識できません。
ちなみにheader要素を使おうがdiv要素を使おうが同じ見た目にできます。人間にとってはどちらも一緒です。でも検索エンジンなどのコンピューターにとっては全然違うんです。

このようにコンピューターがWebページの情報を効率よく収集できるように意味づけする構想をセマンティックWebといいます。セマンティックWebを意識してdiv要素に頼り過ぎない記述を心掛けたいですね。

HTMLで作ったかたまりをCSSで装飾・配置

HTMLでかたまりを作っただけでは記述した順にそのかたまり達が並ぶだけです。レイアウトやデザインはCSSの担当なので、あとはCSSでかたまりの大きさや余白、配置などを指定してやります。HTMLで<div id=”content”>などのように、id属性やclass属性でかたまりに名前を付けてあげることでそのかたまりだけをCSSで変えることができます。

Chromeのデベロッパーツールで一目瞭然

Google Chromeを使っている方はWebページ上で右クリックし「検証」を押すか、F12(Windows)または Command + Option + I(Mac)でデベロッパーツールを立ち上げてみてください。スマホの方はごめんなさい・・・。

デベロッパーツール

デベロッパーツールの左上、赤丸で囲った部分をクリックして、Webページ上の好きなところにマウスポインターを合わせてください。するとどうでしょう。デベロッパーツールと連動してその場所がどんなかたまりなのか一目瞭然です。かたまりの中により小さなかたまりが入れ子のように入っていたり・・・。

デベロッパーツール

該当する部分の背景色が変わるので非常にわかりやすいです。

こうしてみると1つのWebページはたくさんの要素(かたまり)から成り立っていることがわかりますね。
私はこのデベロッパーツールと遊んでるうちにHTMLとだいぶ仲良くなれた気がします。おすすめです!

デベロッパーツールはGoogle Chromeに標準装備されているので、Google Chromeを使ったことが無い方は是非インストールしてみてくださいね。

スポンサーリンク

シェアする

トップへ戻る