CSSの基礎とブロック・インラインについて

どうも、僕です。

今回はCSSの基礎でもあるブロックボックスとインラインボックスについての解説をしたいと思います。
これがわかっていればどこのプロパティの値をいじればどうレイアウトが変わるかイメージしやすくなると思います。

ボックスの概念

文書内のすべての要素はボックスと呼ばれる四角形の領域を生成します。これをCSSではボックスと呼んでいるのですが、各ボックスは文字や画像などのコンテンツエリア（内容領域）があり、その周りにパディング（padding）、ボーダー（border）、マージン（margin）という順でエリアを形成しています。

コンテンツエリア（内容領域）

文字や画像などが表示される領域です。widthとheightを指定することで任意の幅と高さにすることができます。

パディング（padding）

コンテンツエリアとボーダーの間にある余白です。paddingを上下左右指定することが可能です。
backgroundで何か指定した場合、コンテンツエリア＋パディングが背景となりますのでパディングも含まれます。

ボーダー（border）

パディングとマージンの間にある領域です。
名前の通り「線」なので、線の種類（ドット、直線とか）、太さ、色を変えることができます。

マージン（margin）

ボックスの一番外側にある余白部分です。paddingと同様上下左右を指定することで余白を調整することができます。
※要素同士が垂直方向で隣接してる場合、条件によりマージンが重なり、大きい方のマージンが反映されます。

この要素を理解した上で、次にブロックボックスとインラインボックス違いを解説していきます。

ブロックボックスとインラインボックスの違い

ブロックボックス

前後に改行が挿入され、要素を一つのブロックとして表示します。
widthとheightの指定が可能。widthを指定しない限り、親要素やブラウザの横幅まで可能な限り広がります。

インラインボックス

前後に改行はされず、要素を一行ずつボックスにし折り返して表示します。
インラインボックスはwidthとheightの指定ができないので、中に入っている文字列の長さ、大きさによりwidthとheightが決まります。そして上下のmarginも指定できるのですが、効きません。

例：

HTML:

<div class="oya">
	<h5>ブロックボックス</h5>
	<span>インラインボックス</span>
</div>

CSS:

div.oya{
	width:400px;
	background:#444;
	padding:20px;
}

div.oya h5{
	background:#fff;
	padding:5px;
}

div.oya span{
	background:#DDD;
	padding:5px;
}

まとめ

CSSの基本であるボックスの概念とブロックとインラインについて解説しましたが、レイアウトを自分の思い通りに変更するときの基本となってくるので学んでおいて損はないと思います。

displayプロパティにはblockやinlineの他にも数多くの値があるので、displayをマスターできればレイアウトの幅も広がると思います。

では。