CSS

on Note

CSSで重要なボックスモデルの考え方

CSSでは、HTML要素の色や大きさを変えるなど、様々な形で見た目を調整します。

レイアウトを整える際、要素の大きさは重要ですが、大きさを指定する際に、基本的なこととしてボックスモデルの考え方が必要です。

ここでは、スタイルを調整するにあたって、知っておくべきボックスモデルの考え方を記事にしています。

ボックスモデルとは

ウェブページがブラウザに表示される際、HTMLの各要素はそれぞれ表示領域を確保します。この表示領域のことをボックスなどと呼びます。

ボックスは、コンテンツを表示する為に確保するコンテンツ領域を中心として、その周囲を囲むボーダー領域(境界線)、パディング領域(コンテンツ領域と境界線の間の余白)、マージン領域(境界線の外の余白)から成ります。コンテンツ領域に、大きさを調整できる余白が取り巻くイメージです。

境界線にあたる部分をborder、コンテンツ領域と境界線の間の余白の部分をpadding、境界線の外の余白の部分をmarginと呼びます。

ボックスモデル

要素にスタイルを適用する際、境界線や余白の幅を任意で指定することも多くなります。ブラウザで見た時、コンテンツに境界線や余白がないように見えても、幅を「0」としているだけであってコンテンツには必ずborder、paddingやmarginは存在しています

このようにコンテンツ領域は、border、padding、marginを持つという概念をボックスモデルと言います。

ボックスモデルとwidth(横幅)height(高さ)の関係

幅を指定するwidthプロパティと、高さを指定するheightプロパティがありますが、これらプロパティを使って幅・高さを設定できるのはコンテンツ領域に対してだけです。

余白にあたるパディング、ボーダー、マージンの大きさは、padding、border、marginプロパティで調整します。

つまり、ボックスに対してwidth、heightプロパティで幅・高さを指定しても、適用されているのはコンテンツ領域にのみであって、その周りには影響していないということになります。

ブロックボックスとインラインボックス

ボックスは、ブロックレベルで扱われるブロックボックスと、インラインレベルで扱われるインラインボックスに分かれます。つまり、要素にはブロックレベルのものとインラインレベルのものがあるということです。

インラインボックス
テキストの行に紛れ込むことのできるボックス。テキストや別のインラインボックスがすぐ隣に並ぶことができる。
左から右に、横方向に配置されるイメージ。
width、heightの指定ができない。ただしimg要素やinput要素など、一部指定できる要素がある。
上下のmarginを指定できない。
ブロックボックス
CSSで指定しない限り、親要素のコンテンツ領域いっぱいに広がる。
その幅に関係なく縦方向に配置される。それぞれの要素が1つの段落として扱われるイメージ。
width、heightが指定できる。widthを指定しない場合は、親要素の幅全体に広がる。
上下左右padding、marginの指定ができる。

ブロックボックスとインラインボックスかというのは、要素に対するdisplayプロパティの値(blockinlineか)でその状態が決まります。

CSSを記述する際に都度display指定しているわけでなく、各要素、デフォルトでその値が決まっています。厳密に言えば、ブラウザのデフォルトスタイルシートが、要素に対しブロックかインラインかを指定しています。

要素にはデフォルトで設定されているblockとinlineですが、displayプロパティを使って、改めて指定することもできます。例えば元々ブロックボックスである要素を、display: inline; と指定してインラインレベルで扱うことができます。

まとめ

Webページに表示される各コンテンツは、コンテンツ領域に加え、パディングやボーダー、マージンといった余白領域を持ちます。余白がないように見えても、値が「0」なだけでこれら3つの余白は存在していると考えます。CSSでは、コンテンツ領域とこれら余白領域を指定して見た目を整えます。

この、HTML要素には、コンテンツ領域と3つの余白が存在するという考え方がボックスモデルです。

横幅を指定するwidth、高さを指定するheightは、コンテンツ領域にだけ働きかけます。よって余白の部分は考慮しません。