【10】ボックスモデル（margin, padding, border を使いこなそう）

前回のインライン・ブロックレベルの話の中で、width, height, padding, border, margin などのプロパティが出てきました。これは、HTMLの要素の「ボックス」を構成するためのプロパティです。

メタデータ・コンテンツ以外のどの要素にも、CSSのボックス（box）と呼ばれる四角い領域ができます。今回はこのボックスの構造を見てみましょう。

本日のINDEX

1. ボックスの構造
   1. インラインの要素にも「ボックス」はできます
   2. width と height で指定するのは中身（Content Area）だけ
2. 着膨れを解消する box-sizing: border-box
   1. box-sizing: border-box はレスポンシブレイアウトに便利

ボックスの構造

ボックスでの padding, border, margin そして backgroud の関係はこのようになっています。

一番内側 Content Box は、コンテンツそのもの。テキストや画像・動画などです。
要素を入れ子にしている場合は、内側に入ってる要素が Content Box ってことになります。

その外側の padding は、コンテンツからボックスの境界までの余白スペース。
ボックスの境界には境界線も付けられます。これは borderプロパティで指定します。
ここまでは背景を付けられます。背景色や背景画像は backgroundプロパティで指定します。

その外側にあるのが margin。隣接するボックスとの間隔です。子要素の場合は親要素のとの間隔。

padding、border、margin、backgroud は無しでももちろんOKです。
ただし、たいていのブロックレベルの要素（h1〜6や pとか ulや liなど）にはブラウザのデフォルトで margin や padding が設定されています。テキストが読みやすいように、そうなっているんですね。

このブラウザのデフォルトスタイルを一旦初期化してから自分のCSSを組んだほうがやりやすいです。
こちら↓に「CSSリセット」について書いていますのでご覧ください。（本ブログでも、いずれ記事にする予定です）
ブラウザのデフォルトスタイルを一旦リセットする [CSSリセット]│＊Web Design 覚え書き＊

インラインの要素にも「ボックス」はできます

ボックス（箱）と言われると、ブロックレベルの要素にしかできないように思いますが、インラインの要素にもボックスはできます。
ただ、Content Area がインラインなので、1行ずつのボックスになるんです。

ブロックボックス（ブロックレベルの要素にできるボックス）は「箱」のイメージ。
要素内の Content Area をひと固まりにして、まわりに padding, border, margin を指定することができます。

インラインボックスは「リボン」のようなイメージ。1行のボックスが連なっていきます。行間のスペースは line-height（行の高さ）に依存します。margin の上下は指定できません。padding, borderは指定できます。

HTMLはこちら。

<div id="sample1">
<p>ブロックボックス（...略）</p>
<p id="smpl_inline">インラインボックスは（...略）</p>
</div>

CSSはこちら。

div#sample1 {padding:0; border:solid 1px #ccc;}
div#sample1 p { /*両方のp要素に同じ指定をしています*/
	margin:1em 1em 2em;
	padding:1em;
	background:#e9ffd3;
	border:solid 3px #a2e269;}
div#sample1 p#smpl_inline {
	display:inline; /*下のp要素（id=sample1_l）だけインラインにしています*/
	line-height:5em;}

インラインボックスは、最初の行だけ marginの左右が効いていますが、2行目からは効きませんね。外側のdiv内で改行されていくので完全な箱じゃないからね。
また、インラインボックスは元々 marginの上下は使えません（前回やりましたね）
そこで行が重ならないように、ここでは「line-height:5em」を指定しています（9行目）
この line-height を指定しなければ、こんな表示になっちゃいます ↓

width と height で指定するのは中身（Content Area）だけ

これ、けっこう大事です。
ボックスモデルの width と height は、 Content Box の領域「Content Area」の幅と高さを指定するのが基本形です。

padding や border は、そのぶんの太さが加算される = 着膨れする。これが標準なんです。

このボックスのルールを知らないと、
「width:100% にしたのに、はみ出るんだけど？！」なんてことにw。
padding や border が加算されるので、はみ出るのです。

width:100% で padding や border をつけると、はみ出しちゃいます。

サンプルで右側がはみ出ているのは行揃えが「text-align: left」だから。「text-align: right」に指定していたら左側にはみ出ます。

HTMLはこちら。

<div id="sample1-2">
<p>width:100% で padding や border をつけると、はみ出しちゃいます。</p>
</div>

CSSはこちら。

div#sample1-2 {width:70%; padding:1em; border:solid 1px #ccc;}
div#sample1-2 p {
	width:100%;
	padding:1em;
	background:#e9ffd3;
	border:solid 3px #a2e269;}

はみ出ない対策は、
●がんばってピクセル計算する（親要素の widthから子要素の padding や border を引いた値を子要素の widthにする）
●入れ子にする（padding や border が無い子要素を作り、その中の孫の要素に padding や border を指定）
●子要素に width指定しない（％とか、ピクセルとか、いっさい指定しないでおまかせにする）

しかしそれでも「ナビゲーションボタンを親要素の幅の4等分にしたい...」など、幅を指定しなければレイアウトできない場合もあります。
親要素に対して width:25% と指定しても、border や padding を指定するとはみ出るので、さらに内側に子要素を入れ子にして...などと面倒くさいことをするハメになりますね。

それを解決する box-sizing: border-box というのが CSS3 から登場。
これのおかげで、CSS2までの時代と比べてグッとレイアウトがしやすくなりました。

着膨れを解消する box-sizing: border-box

CSS3 からの新プロパティ box-sizing で、面倒な計算無しでもレイアウトできます。

box-sizingの「値」 は、以下のものがあります。
●content-box：デフォルト（box-sizing を指定してなきゃコレ）。padding と boeder が 幅と高さに含まれません（標準型の状態）
●padding-box：padding までが幅と高さになります。
●border-box：border までが幅と高さになります。
●inherit：親の値を継承します（親に box-sizing が指定されてなかったらデフォの標準型。されてたらそれを継承）

というわけで、
box-sizing の値のうちの border-box だけを覚えておけば、とりあえずOK！
box-sizing: border-box は、このように width と height は border までの範囲になります。

box-sizing: border-box で border や padding が無くても、べつにエラーになりませんので、これ以外あんまり使わないんじゃないかな。

box-sizing: border-box はレスポンシブレイアウトに便利

スマホやタブレットなどのデバイスでは、コンテンツのwidthを「％」で指定することが多いです。
いろいろなデバイスの表示領域に合わせるには、ピクセルで指定するわけにはいかないから。
しかし、ボックスの width を標準型のまま「％」で指定すれば、borderやpaddingをつけた時 はみ出しちゃいますね。

そんなとき、box-sizing: border-box を使えばすっきりレイアウトできます。
サンプルで見てみましょう。

ノーマル（box-sizing 不使用）
はみ出しちゃってます。

box-sizing: border-box を使用
これなら はみ出さずにスッキリ。

HTMLはこちら。

<div id="sample2">
  <p>ノーマル（box-sizing 不使用）<br>
  はみ出しちゃってます。</p>
  <p id="smpl_sizing">box-sizing: border-box を使用<br>
  これなら はみ出さずにスッキリ。</p>
</div>

CSSはこちら。

div#sample2 {width:70%; padding:1em; border:solid 1px #ccc;}
div#sample2 p {
	width:100%;
	padding:1em;
	background:#e9ffd3;
	border:solid 3px #a2e269;
    margin-bottom:1em;}
div#sample2 p#smpl_sizing {
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	margin-bottom:0;}

下のp要素（id = smpl_sizing）だけ、「box-sizing: border-box」を指定しています。

box-sizing は、IE8から対応だそうです。
Android2.x までは未対応なのでベンダープレフィックス（webkit系）が必要（CSS 9行目）（2017年11月時点で Android2.x のシェアは0.6％程です。もう不要かな）

次回予告

さて次回からは、今回もでてきた margin について詳しく見ていきます。
margin は、レイアウトの基本とも言えるものですが、けっこうややこしい決まり事が多いんです。
それを知らないで適当にやってると、いつまで経っても「あれ？何で？？」が続くハメになるので、早めに決まり事をチェックしておくほうがお得です（経験者は語るw）

まず次回は margin の指定のしかた。とくに「ショートハンド」という一括でまとめて書く方法を使ってみましょう。