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

最終更新日:2017年09月23日  (初回投稿日:2015年10月29日)

前回のインライン・ブロックレベルの話の中で、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は指定できます。

<div id="sample1">
<p>ブロックボックス(...略)</p>
<p id="smpl_inline">インラインボックスは(...略)</p>
</div>
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」に指定していたら左側にはみ出ます。

<div id="sample1-2">
<p>width:100% で padding や border をつけると、はみ出しちゃいます。</p>
</div>
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 を使用
これなら はみ出さずにスッキリ。

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

CSSソースの意味、わかりますよね。一応解説しておくと、
p要素は両方とも「width:100%」「padding:1em」「background:#e9ffd3」「border:solid 3px #a2e269」が共通の指定になっています。
下のp要素(id = smpl_sizing)だけ、「box-sizing: border-box」を指定しています。
(ついでに「margin-bottom:0」にしてムダな下マージンが無くなるようにもしています)

box-sizing は、IE8から対応だそうです。
ただし Android2.x までは未対応なのでベンダープレフィックス(webkit系)が必要だって(上のCSSソース 9行目)
(2015年10月時点で Android2.x のシェアは4%程ですので、そのうち無くなりそうですけどね)

次回予告

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

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

関連記事
この記事をはてなブックマークに追加

やる気を保つためにランキングに参加しています。
応援してくださると すっごいやる気を出します! (笑)

初心者にも使いやすい(と思う)レンタルサーバー

最近よく「レンタルサーバーはどこがいい?」とご質問が来ます。
自分でも使っていてオススメなのはミニバード。管理画面がわかりやすくていい感じす。
仕事で使ってるロリポップもわかりやすい管理画面で、初めてでもすんなり使えると思います。
両方とも、なんといっても料金が安いです。初めてだとなるべく安いほうがイイですからね。

それよりちょっと料金は高いけど、高スペックでコスパが良く、信頼性も高いサーバといえば、やはりさくらのレンタルサーバと、XSERVER(エックスサーバー)だと思う。この2つは老舗でユーザーも多いので、質問する場がたくさんあり、初心者の方でもイケるだろうと思います。

レンタルサーバーは、たくさんあり過ぎて迷いますよね。近いうちに、初心者にも良さげなサーバーについて記事にまとめます。*記事をアップしたらココにもリンクを貼ります。

スポンサーリンク

コメントの投稿

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
09 | 2017/10 | 11
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31 - - - -
Archive
RSS Link
Profile

yuki★hata

Author : yuki★hata
せめて月1回の更新をめざします~。

メールフォームはこちら

スポンサーリンク
スポンサーリンク
Copyright © ほんっとにはじめてのHTML5とCSS3 All Rights Reserved.