【 CSS 】ボックスモデルを0から解説。デザイン例も紹介

Webサイトを作成するときコンテンツと境界線の間の余白を増やす、要素同士の間隔を調整するなど、CSSでのレイアウトを調整する必要があります。

要素の余白や距離感を設定する際、理解しておくべき概念がボックスモデルです。CSSでデザインを整える際にはこのボックスモデルを理解しておく必要があります。

この記事ではボックスモデルについて細かく解説しているので、ぜひ参考にしてください。

記事後半では、ボックスモデルを参考にしたデザイン例も紹介していますので最後までご覧ください。

ボックスモデルとは

HTMLのすべての要素は、テキストや画像などのコンテンツが入った四角い箱であると考えられています。これをボックスと呼びます。

このボックスには、他にもパディング、ボーダー、マージンといった領域があります。このコンテンツ、パディング、ボーダー、マージンの4つを合わせてボックスモデルと言います。

デザインやコーディングを行う際、一つひとつの要素をボックスモデルとして捉える必要があるため、このボックスモデルの概念を理解することは非常に大切です。

これから、ボックスモデルを構成する要素をそれぞれ解説していきます。

content(コンテンツ)

contentとは、要素の中心を指します。

HTML
<p>サンプル</p>
<div><img src="sample.png" alt="サンプル"><div>

上記のコードのテキストと画像、どちらもcontentです。また、動画やSNSの埋め込みなど、要素の最も内側に入るものはすべてcontentです。

ボックスモデルの中でも内容を表示する領域がcontentであると覚えておきましょう。

CSSでbackgroundプロパティを設定すると、指定した色や画像が背景として表示されます。width（幅）とheight（高さ）の値を持っていて、こちらもCSSで設定可能です。幅は通常、ブロックレベル要素であれば、横幅いっぱい、インライン要素やインラインブロック要素であれば、コンテンツの幅に準拠します。高さはどんな場合においても、設定されない限りは中身の高さに準拠します。

CSS
div {
background:#cccccc;
width:80%;
height:50px;
}

上記のコードのように記述することで、背景が#cccccc（グレー）で、幅が80%、高さが50ピクセルのcontentを作成することができます。

padding(パディング)

paddingは詰め物や水増しなどの意味を持つ英単語です。CSSにおいてはコンテンツとボーダーの間に存在する余白のことを指します。

」padding-top（上）、padding-right（右）、padding-bottom（下）、padding-left（左）の4方向に指定可能です。

CSS
div {
padding-top:10px;
padding-right:5px;
padding-bottom:8px;
padding-left:6px;
}

上記のコードのように4方向すべてに違う値の余白を設定可能です。

CSS
div {
padding:10px;
}

余白を取る方向を指定しないpaddingプロパティは、全方向という意味です。上記のコードでは上下左右すべての方向に、同じ10ピクセルの余白が設定されます。

CSS
div {
padding:10px 5px 8px 6px;
}

paddingプロパティに4つの値を記述すると、左から順に時計回りに上、右、下、左と個別に方向を設定できます。つまりこの指定は、上記のtop、right、bottom、leftを別々に指定した記述法とまったく同じ余白となります。こちらの方が行数が少なくて済み、大変スマートな記述です。

CSS
div {
padding:10px 5px;
}

このように値が2つの場合は上と下が10ピクセル、右と左が5ピクセルです。上下と左右をセットで指定できます。

CSS
div {
padding:10px 5px 8px;
}

値が3つの場合は、順に上、左右、下となります。このコードでは上が10ピクセル、左右が5ピクセル、下が8ピクセルです。

paddingはbackground（背景）と併用されることが多いプロパティです。

HTML
<p>サンプル</p>

CSS
p {
background:#cccccc;
}

このようにp要素に#cccccc（グレー）の背景を指定します。すると、このままでは背景の切れ目と文字の上下との隙間が無く、大変見栄えが悪い状態となってしまいます。

テキストが左寄せの場合は、左もぴったりとくっついて隙間はありません。これでは文章が読みにくく、背景がかえって邪魔になってしまうでしょう。

paddingを使えば、背景の切れ目とテキストの間に余白を取ることができます。

CSS
p {
background:#cccccc;
padding:10px;
}

これで背景の切れ目とテキストの間に、10ピクセルの余白が取れます。テキストの可読性が格段に上昇するでしょう。

画像でも同様です。paddingが無ければ、上下や端がぴったりとくっついてしまい、背景の意味が薄れてしまいますが、paddingを用いることによって意味のあるレイアウトとなります。

background（背景）はcontentとpaddingに有効と覚えておいてください。

border

paddingの外側に位置していて、言葉の通り、要素の境界線という意味です。ほとんどの場合、初期設定は0なので表示されませんが、すべての要素にはborderが存在します。

borderとpaddingの異なる点は、borderが「線」でpaddingが「余白」であるという点です。

paddingは余白の大きさを指定するのみですが、borderは線の太さ、色、スタイルなどが指定できます。逆に言うと、これらを指定しないと機能しません。

CSS
div {
border-width:2px;
}

border-widthは、borderの太さを指定するプロパティです。これで元々0だったborderに2ピクセルという指定が与えられましたが、これではまだborderは見えません。色とスタイルを指定する必要があります。

CSS
div {
border-width:2px;
border-color:#000000;
border-style:solid;
}

上記のコードでは、border-colorは線の色で#000000は黒、border-styleは線のスタイルでsolidは直線です。これで2ピクセルの黒い直線という指定が出来ました。

borderを用いる際は、必ず太さ、色、スタイルの3つを指定するようにしてください。なお、border-styleには他に点線のdotted、破線のdashedなどがあります。

上記の記述は、短くすることが可能です。

CSS
div {
border:2px #000000 solid;
}

border-width、border-color、border-styleという3つのプロパティに分けて記述していましたが、borderというプロパティで太さ、色、スタイルを一挙に指定可能なのです。値の間に半角スペースを入れて記述します。記述する順番に、決まりはありません。

borderは、要素の全方向に線を表示させるプロパティです。一方向だけに線を表示させるプロパティも存在します。

paddingと同様、border-top（上）、border-right（右）、border-bottom（下）、border-left（左）の4方向です。

CSS
div {
border-top:2px #000000 solid;
}

これで要素の上側だけに、2ピクセル黒い直線を引くことができます。border-top-widthというように太さ、色、スタイルの個別指定も可能ですが、CSSが長くなってしまうので、一括の指定を覚えておくとよいでしょう。

要素1つにつき指定可能なのは、1つの方向だけではありません。

CSS
div {
border-top:2px #000000 solid;
border-bottom:4px #ff0000 dashed;
}

上記のコードで上側は2ピクセルの黒い直線、下側は4ピクセルの#ff0000（赤）の破線と、まったく違うborderを引くことができます。左右も同様で、4方向に別々のborderを指定可能です。

paddingとbackgroundが併用されることが多いというのは先に述べた通りですが、borderもpaddingと頻繁に併用されます。

CSS
p {
border-bottom:1px #000000  solid;
}

これはp要素の下に1ピクセルの黒い直線を引くというコードですが、このままではテキストと線との間隔が無いので、可読性に難があります。

ボックスモデルは内側からcontent、padding、borderという構造になっていますが、paddingがゼロなのでcontentとborderがくっついてしまっている状態です。

CSS
p {
border-bottom:1px #000000  solid;
padding-bottom:10px;
}

このようにcontentとborderの間に10ピクセルのpaddingを入れることで、テキストが読みやすくなります。

paddingは基本的に、contentとborderの間に必要なものです。borderを設定したらpaddingも忘れないようにしてください。

margin（マージン）

ボックスモデルの一番外にある要素です。marginは余白という意味でpaddingと重なりますが、marginはborderの外側でpaddingは内側という違いがあります。

marginはborderの外周の余白です。また、paddingはそのボックスモデルに指定された背景の影響を受けますが、marginは透明です。

paddingと同様、margin-top（上）、margin-right（右）、margin-bottom（下）、margin-left（左）の4方向に指定できます。短く書くことも可能です。

CSS
div {
margin:10px;
}

値が4つから2つの場合の指定も、paddingと同じです。

marginは以下のようなときに使われます。

HTML
<div><img src="sample1.png" alt="サンプル1"><div>
<div><img src="sample2.png" alt="サンプル2"><div>

CSS
div {
background:#cccccc;
padding:10px;
}

2つ並んでいる画像に背景色とpaddingを指定しました。これで画像と背景の端の間に余白が生まれますが、2つの画像同士の背景はくっついた状態です。

そこでmarginを記載します。

CSS
div {
background:#cccccc;
padding:10px;
margin:10px;
}

ここにmarginを指定することで背景色の外側に、色の無い余白が生まれます。これで二つの要素を離すことができるのです。

borderが設定されていたとしても、marginが最も外側になります。

ボックスモデルを意識したデザイン例

ここからはcontent、padding、border、marginというボックスモデルを意識したデザインの具体例を紹介していきます。

要素ごとに区切る

リストを例に解説します。リストは物事を列挙するときに便利ですが、そのままだと、ただの単語の羅列のように見えてしまう場合もあります。

HTML
<ul>
<li>リスト1</li>
<li>リスト2</li>
<li>リスト3</li>
</ul>

CSS
li {
padding-bottom:10px;
border-bottom:1px #000000 solid;
margin-bottom:10px;
}

まず、リストのテキストの下にpaddingで10ピクセルの余白を設けます。その下に1ピクセルのborder、さらにその下にmarginで10ピクセルのを余白を設けました。

marginの下から、次のリストのテキストが始まります。これで、要素のひとつひとつが区切られ、分かりやすくなりました。

このようにborderで区切り、その上下にpaddigとmarginで余白を設けるという手法は、さまざまなシチュエーションで使われます。

見出しを強調する

見出しは真っ先にユーザーの注意を引きつけなければならない要素で重要です。

本文をしっかり読ませるためにも、見出しは目立ち、分かりやすくしなければなりません。

HTML
<h2>見出し</h2>
<p>本文…</p>

CSS
h2 {
background:#ffc7c7;
padding:10px;
border-left:5px #ff0000 solid;
border-bottom:1px #999999 solid;
margin-bottom:15px;
}

まず、見出しに#ffc7c7（薄い赤）の背景を敷きました。見出しを目立たせ、他の部分と差別化するという意図です。このままでは背景の切れ目とテキストとの間に隙間が無く、borderともくっついてしまうので、paddingで10ピクセルの余白をとっています。この余白にも、そのまま背景色がつきます。

そして、10ピクセルの余白をとったところに2つのボーダーを設定しました。border-leftは太く色も#ff0000（赤）と強いので、背景と同様に見出しを目立たせることができます。border-bottomは細く、色も#999999（グレー）と目立ちませんが、下の要素との区切り線としては十分な役割を果たしています。

その下にmarginで15ピクセルの余白をとった後、本文が始まります。これによって、まず見出しにユーザーの注意を引きつけ、そこからスムーズに本文へと誘導出来ます。これも、paddingとmarginの使い分けがポイントです。このような見出しの表現も、よく使われるので覚えておいてください。

ブロックを分ける

見せたい内容が、1ページにつき1つだけというケースはほとんどありません。Webサイトはさまざまな情報が組み合わさってできています。

情報のひとつひとつを、それぞれ独立したものだというように見せたいときに便利な手法です。

HTML
<div>
<h2>見出し1</h2>
<p>本文1…</p>
</div>
<div>
<h2>見出し2</h2>
<p>本文2…</p>
</div>

CSS
h2 {
margin-bottom:10px;
}
div {
padding:10px;
border-bottom:1px #999999 solid;
margin-bottom:15px;
}

まず、見出しと本文の間にmarginで10ピクセルの余白を設けました。見出しはborderなどを使ってさらに装飾してもよいでしょう。

見出しと本文を包むdivの四方にpaddingで10ピクセルの余白を設定し、その外側にborderです。これでcontentとborderの間に余白が生まれ、見やすくなりました。borderは、内側にある内容がそれぞれ独立したものだと示すという意図があります。

そしてborderの下にmarginで余白を設け、それぞれのdivを切り離しています。このようにページ内でいくつものブロックを作りたいときもボックスモデルの構造を理解しておくと、作業がしやすくなります。

CSSにおけるボックスモデル：まとめ

ボックスモデルについて解説してきました。content、padding、border、marginについて、ご理解いただけたでしょうか。

今回紹介したデザインは、ボックスモデルが特に分かりやすい例ですが、ボックスモデルは他のどんなときにも存在します。常にそれを頭に置き、デザインやコーディングを行ってください。