CSSのボックスモデルの構造と指定方法を理解する

CSSのボックスモデルの構造の理解はCSSで「余白を自在にコントロールする」ためには必ず必要だと思う。と今さら気づきました。

今までさんざんCSSをいじってきたわりには自己流で書いていたので、少しはまともに理解してみようと思い記事にしておこうと思うのです。

ボックスモデルの構造と指定方法を理解できれば、これで今日から私もCSSのボックスモデルマスターに近づける？かもしれない。

CSSのボックスモデルとは

HTMLタグでマークアップした部分が構成するボックスは、ボックスごとに以下のような構造になり各領域が配置されます。

コンテンツエリアにはマークアップした文字や画像が入り、その周りにはCSSの「padding」「border」「margin」プロパティの指定によって「パディング」「罫線(ボーダー)」「マージン」を配置することができます。

それぞれが各自の領域内でボックスの構造を作り、一つのボックスが出来上がります。

こうしたボックスの各領域のまとまりを「ボックスモデル」と呼び、ウェブページのデザインやレイアウトを調節するときの基本構造になります。

ボックスモデルの構造に使用するCSS

ボックスモデルの構造を作るために使用するCSSは4つのボックス領域があり、4つの領域を配置するためにCSSでプロパティとその値を指定することでボックスモデルの構造で余白が作れます。

ボックス作成に使う3つのプロパティは以下です。

• marginプロパティ
• borderプロパティ
• paddingプロパティ

そしてボックスの一番内側にコンテンツが入ります。

CSSで「マージン」「ボーダー」「パディング」をコンテンツの外側に配置することで、要素に余白を作りボックスを見やすくすることができます。

プロパティのmargin、border、paddingはそれぞれに値を指定することで、各領域内の余白や色をデザインできます。

マージンの指定方法

CSSのボックスモデルでは、罫線(ボーダー)の外側に配置する余白を「マージン」と呼び、この余白の大きさを「marginプロパティ」で指定します。

ボックスモデルの構造で言えば、マージンはボックスの一番外側に位置しているということですね。

まずはマージンを指定しない表示を知りたい。下の画像は<div></div>でマークアップした文章をオレンジ色で表示しただけのものです。

<div></div>でマークアップした部分には標準ではマージンは挿入されません。そこに例えばmargin: 40px;とcssで指定すると、ボーダーの外側に40ピクセルのマージンを配置することができます。

ブルーの部分がマージン領域です。このマージンの指定方法はマージンボックスの四辺の値をまとめて指定しています。HTML要素とCSSのコードは以下の書き方です。

<div class="box">ボックスモデルのマージン</div>

.box {
    margin: 40px;
    border: 2px solid orange;
    background: moccasin;
}

ですが、もう少しマージンが作るボックスの配置を細かくコントロールしたい場合には、マージンの大きさを辺ごとにCSSで指定することもできます。

marginの大きさを辺ごとに指定する

marginは「上下左右」の辺ごとにマージンの大きさを指定することができます。

.box {
    margin: 20px 40px 60px 80px;
    border: 2px solid orange;
    background: moccasin;
}

たとえばmarginプロパティの値を「20px 40px 60px 80px」と指定すると以下のようにマージンボックスの「上20px」「右40px」「下60px」「左80px」の大きさのマージン領域が配置できます。

このような辺ごとのマージンの指定方法は4つの指定方法があります。

• 四辺
• 上/右/下/左
• 上/左右/左
• 上下/左右

上記の4つの指定をするときのmarginの値は上から時計周りに記述します。

marginを個別に指定する

CSSのmarginで、もっと細かく個別に指定する場合はmarginプロパティを四辺のどれか一部分だけに絞って以下のようにCSSを記述します。

• margin-top: 20px;
• margin-right: 40px;
• margin-bottom: 60px;
• margin-left: 80px;

要素に適用するマージンの領域を上だけならプロパティは「margin-top:」

右だけなら「margin-right:」

下だけなら「margin-bottom:」

左だけなら「margin-left:」

と記述して値を指定します。

マージンはたとえば、<h1>や<p>などのタグでマークアップした場合には、デフォルトスタイルシートによって標準で上下マージンが挿入されます。(画像のブルー部分がマージン)

これは私たちがマージン指定することにより上書きされます。まっさらな状態からボックスモデルの構造を組んでいきたいとかなら、リセットCSSなどで1から配置したりデザインすることもできます。

ボーダーの指定方法

次にボーダー領域をボックスモデルの構造の中に配置する場合です。ボーダーはCSSのborderプロパティでボックスの罫線を表示します。

ボックスモデルの中では、マージンから見たボーダーは内側に位置しています。。そしてこの後に説明するパディングも含めると、ボーダーはボックスの構造の中の真ん中に挟まれて位置していて、名前どおりの「ボーダーライン」を引きます。

borderで罫線を表示させデザインや配置をするには、罫線のスタイル、太さ、色の値をまとめてCSSで指定する書き方と、個別に表示する方法があります。

まとめて指定する場合は指定したい要素をセレクタにして以下のようにCSSを書きます。

これらの値はborder-style、border-width、border-colorで値を個別に指定することもできます。たとえば個別の場合の書き方は以下のようにCSSを記述します。

.box {
    border-style: solid;
    border-width: 20px;
    border-color: #ff7555;
}

border-style: solid;でボーダーのスタイルを線にして、border-width: 20px;の指定では、ボーダーの横幅を指定、border-color: #ff7555;はボーダーの色を指定しています。

このような指定方法はボーダーのデザインを辺ごとに指定するときに使えるかと思います。

ボーダーのデザインを辺ごとに指定する

ボーダーの辺ごとにデザインを変えてみたい場合には、先ほどの個別に値を指定する書き方を使います。

.box {
    border-style: dotted solid;
    border-width: 10px 20px;
    border-color: #b0d673 #8fdff6 #f8b3d2 #fdd035;
    background: moccasin;
}

border-style:でボーダーの上下を点線に、左右は線にする指定をしています。

border-widthはボーダーの上下の横幅を10pxに、左右の横幅を20pxの値にしてボーダー領域を配置してます。

そしてborder-colorの値は上、下、左、右の時計回りでカラーコードを書きボーダーの辺ごとにカラーを変えてデザインしています。

極端なボーダーの例で、めちゃくちゃダサいデザインですが辺ごとにボーダーを指定するときには、このような指定方法できるのです。

ボーダーを特定の辺だけ表示させる

特定の辺だけにボーダーを表示したい場合もあります。その場合のCSSは以下のようにプロパティ指定をします。

• border-bottom-style
• border-bottom-width
• border-bottom-color

ボーダーの下辺だけにborderプロパティを指定するパターンです。borderプロパティに今までの記述はborder-styleやborder-widthとしていましたが、特定の辺だけの場合にはborderプロパティに「どの辺だけを指定領域に含めたいか」を付け足してあげます。

-top
-right
-bottom
-left

そうすることで四辺のどれかの一辺だけをコントロールできます。

たとえば<h2>の要素の下辺だけにボーダーを指定する場合のCSSの書き方が以下のコードです。

h2 {
    margin: 40px;
    border-bottom: 6px solid #f8b3d2;
    padding: 5px;
}

みやすいようにマージンとパディングも指定していますが、ボーダーをh2の下だけに表示させてみました。よく見かける見出しの下に線が引いてあるシンプルなボーダーにすることができます。

パディング指定方法

CSSのボックスモデルではボーダー(罫線)の内側に挿入する余白をパディングと言います。このときの内側の余白の大きさをCSSのpaddingプロパティで指定します。

たとえば、<div></div>でマークアップした文章をピンクの罫線で囲み、背景をブルーにした場合は標準でパディング表示はされませぬ。

.box {
    border: 20px solid #f8b3d2;
    background: skyblue;
    padding: 20px;
}

そこでpadding: 20px;とCSSを記述します。

そうすると罫線の内側には20ピクセルのパディングで余白を作ることができます。

パディングはボックスモデルのコンテンツに背景カラーや画像を使用した場合には、パディング領域にコンテンツが含まれます。

カラーを指定している画像だったのでパディング領域だけみやすい画像も用意しました。以下の画像です。

パディングを辺ごとに指定するときの書き方

次はCSSでパディングを上下左右の辺ごとに指定する場合はpaddingプロパティの値を記述するときに以下のように指定するとコントロールできます。

• 四辺
• 上/右/下/左
• 上/左右/下
• 上下/左右

マージンのときと同じですが、辺の指定方法も時計周りにしてCSSを書きます。

四辺　padding: 40px;

上下左右　padding: 20px 40px 20px 40px;

上、左右、左　padding: 30px 40px 20px;

上下、左右　padding: 20px 40px;

パディングを個別に指定する場合の書き方

これまたマージンと同じですがパディングの指定を完全に個別の辺ごとにCSSで指定する場合は以下のように書きます。

padding-top: 20px;
padding-right: 40px;
padding-bottom: 30px;
padding-left: 40px;

パディングの四辺を個別にすることで四辺それぞれに異なるパディングにしたり、一部分の辺だけ指定したりする余白を指定できる書き方です。

ボックスモデルのコンテンツは構造の一番内側

最後にボックスモデルのコンテンツの部分です。

CSSのボックスモデルの構造の中で一番内側になる構造部分です。

ボックスモデルのマージン、ボーダー、パディングを指定する値の取り方によってボックスの中のコンテンツはさまざまな位置にコントロールできます。

背景画像をつけてボックスの位置や余白の取り方を色々試していくと、理解しずらかったボックスモデルのマージン、ボーダー、パディング、がコンテンツに対してどのように指定されて表示されるのか視覚的にも理解が深まります。

ボックスモデルの構造を分かりやすく例えるなら

CSSのボックスモデルの構造の内部、マージン、ボーダー、パディングを少しでも理解できるように記事にしてきましたが、ボックスモデルの構造を分かりやすく何かに例えるなら「家の中と外」のイメージですね。

ボーダーを指定しているなら、ボーダーを家の外と中の「ボーダーライン」にして、家の外をmargin。家の中をpaddingのようなイメージを持ってボックスモデルを組み立てていくと理解がしやすくなるかも？しれません。

さらに理解するために例えを進化させると、夫婦関係の「ボーダーライン」。

自分自身はコンテンツ。

パディングもカラーや画像を使うとコンテンツに含まれるので、自分色に染めて領域を増せるので自分パディング。

問題は長年連れ添ってる旦那や嫁の変貌ぶりに嫌気がさし、ボーダーラインの外、つまりmargin旦那や嫁になってしまうことです。

例えが分かりそうな場合は、そんな感じで理解してみてください。

では。