シリーズ第17回は、ブロックボックスとインラインボックスについてです。これまでの数回でCSSのボックスモデルに関連した情報を取り上げてきました。基本的な考えとして、HTMLの各要素を1つのボックスとしてとらえて、CSSでスタイルをあてていくということでした。このボックスには2種類あります。それが「ブロックボックス」と「インラインボックス」です。
ブロックボックスとインラインボックス
ブロックボックスとインラインボックスの特徴をかんたんに説明します。
ブロックボックス（ブロック要素）
ブロック要素はインライン要素と他のブロック要素を含めることができます。ブロック要素がインライン要素よりも大きな構造を構築できるというイメージです。
インラインボックス（インライン要素）
基本的にインライン要素は他のインライン要素しか含めることができません。ブロック要素をインライン要素の中に置くことはできないということです。
ブロックボックスとインラインボックスの違い
ブロックボックスとインラインボックスの違いについて、具体例を挙げて解説します。まず、かんたんに次のようなファイルを準備します。
HTML：
CSS：
divで囲んだ「ブロック要素」とspanで囲んだ「インライン要素」に対して、同じ背景色を指定しています。どのように表示されるでしょうか。
同じスタイルをあてたのに、すでに表示が異なっているのが分かります。具体的な違いについて以下に記します。
改行されるか
この点は第8回でも少し触れました。先程の「ブロック要素」と「インライン要素」をHTMLでコピーして3つ作ります。CSSのスタイルはそのままです。
このように、ブロック要素（div）は改行されています。それに対してインライン要素（span）は改行されていません。このように、ブロックレベル要素は改行され常に新しい行から始まりますが、インライン要素は行内のどこからでも始めることができるという違いがあります。
widthとheightがきくか
今度はdivとspanの両方に対して、width:200pxとheight:100pxをあてました。表示は次のようになります。
ブロック要素に対してはwidthとheightプロパティがきいていますが、インライン要素にはきいていません。 これも大きな違いです。
例えば、インライン要素の一つであるsmall要素があります。コピーライトなどを記述する際に使用します。この要素にwidthとheightをあててもスタイルはききません。私も最初small要素に対してheightをつけたいと思って指定したことがありました。全く変化がなかったことを覚えています。
padding,margin,borderをつけた時の表示
まずインライン要素についてです。span要素で考えます。
HTML：
上のようなHTMLを書き、背景色を薄い青に、パディングを10pxつけます。表示すると下の画像のようになります。
指定した通り、背景色がつき内側の余白であるパディングが10px分ついていることが確認できます。これに加えて、span要素にpadding,margin,borderを指定してみましょう。
CSS：
上の画像のように、背景色をつけpadding,margin,borderを指定しました。ブラウザに表示すると次の画像のようになります。
指定した通り、padding10pxとmargin10px、border2pxもついていることが分かります。しかしインライン要素の場合、他の要素を考慮しないで表示されるため表示崩れがおきており、インラインボックスが下の文章と重なってていることが分かります。これがインライン要素の特徴の一つです。そのため、例外はあるものの、基本的にインライン要素にpadding,margin,borderをつけることはしません。
ブロック要素になるとどうでしょうか。div要素で考えてみましょう。
HTML：
「プログラミング」の文字の部分をdiv要素で囲みました。
CSS：
今度はdiv要素に対して、先程と同じスタイル、背景色をつけpadding,margin,borderを指定しました。ブラウザに表示すると次の画像のようになります。
しっかりとpadding,margin,borderがついています。先程のインラインブロックとは異なり、改行され他の要素を考慮した表示になっています。これがブロックボックスの特徴の一つです。
まとめますと、インラインボックスもブロックボックスもpadding,margin,borderのプロパティはきいています。ただインライン要素の場合、他の要素を考慮せずに表示されるということを覚えておきましょう。
どの要素がブロックまたはインラインなのか
この点は、MDNリファレンスを見ると確認できます。
ブロック要素：div、p、li、hrなど
インライン要素：span、a、imgなど
これも最初から全部覚える必要はないと思います。スタイルがうまく当たらないといったことが起きた時にリファレンスで確認するという具合に、だんだん覚えていけば大丈夫です。
img要素も実はインライン要素なんですね。画像の大きさの調整をwidthとheightでする印象でしたが、デフォルトではインライン要素のためスタイルはきかないわけです。ただブロック要素をインライン要素へ、インライン要素をブロック要素へ変更するプロパティもあります。この点は今後の記事で解説します。
まとめ
シリーズ記事 初心者もできる！プログラミング基礎講座【第17回】はいかがでしたか。今回は、ブロックボックスとインラインボックスについて解説しました。
それぞれの異なる点を理解できたと思います。これはレイアウトを行う点で必須の知識です。しっかり覚えて活用していきたいですね。
次回は、ブロック要素をインライン要素へ、インライン要素をブロック要素へ変更するプロパティについて解説します。次回もお楽しみに！