ボックスとは

ボックスを理解する

CSSにおけるボックス要素は「ここから → ここまで」で範囲が決まり、ひとつの箱に入れるイメージになります。通常「ブロック要素」となり、特定の範囲をひとつのグループにし、ひとまとまりで扱えるようにします。それらが位置を指定することで、レイアウトされていきます。

HTML5から登場したより具体的な意味を持つものや、単に「ここから—-ここまで」と範囲を指定するだけのものもあります。それぞれに使い方が異なっていますので、セマンティック（意味に沿った）使い方を意識して理解しましょう。これらは、基本的に「ブロック要素」となります。

div	汎用ブロック範囲内に特別な意味がない場合に使用。あらゆるグループ化に使える汎用要素。
section	汎用セクション内容を論理的にグルーピングする。記事内の一部分をまとめるのに適している。
header	ヘッダー(ページの上部) ページやセクションの先頭部分に使う。
nav	ナビゲーション(メニュー) メニューやリンク集などのナビゲーション領域に使用。
article	完結したコンテンツ独立して完結している部分に使用。ブログ記事やニュース記事などを包囲する。
aside	独立したコンテンツ本文とは独立した補足的な内容に使用。バナーやカレンダーなどを包囲する。
footer	フッター(ページの下部) ページやセクションの末尾に使う。

上記以外に、インライン要素でありながら範囲指定ができるspanもあります。spanは、特定の意味を持たず、文章中の一部分を手短にグループ化するためのタグです。インライン要素のため、文字列や他のインライン要素と同じ行に並びます。ブロックによる範囲指定には使えません。

朝食は、コーヒーでした。

<p>朝食は、<span class="red">コーヒー</span>でした。</p>