- 2014年03月09日
- HTML/CSS
- box-sizing, CSS覚書
(K)borderもpaddingの数値も気にしなくていい！！cssのbox-sizing(CSS覚え書き)
今回は、スマホサイトやレスポンシブWebデザインの際に必須ではないかなと思うbox-sizingについて覚書きします。
というのも、存在自体は何となく知ってはいたんですが・・・レスポンシブwebデザインの教本を読んでいた時に再発見しまして、コレは何かと使えるんじゃないかと認識したんで今回掘り下げてみようかと思います。
cssでBoxレイアウトを組む時に、widthを指定してpaddingをつけて、borderもつけて、隣り合わせにfloatで2個めのBoxつくたら・・・レイアウト崩れた〜。計算しなおしや〜。
なんて事がよくあると思いますが、
そんな時に便利なのが「box-sizing」です。
box-sizingの概要
「box-sizing」は、ボックスサイズの算出方法を指定する際に使用します。
指定する値は以下です。
- content-box
- paddingとborderを幅と高さに含めない（デフォルト）
- border-box
- paddingとを幅と高さに含める
- inherit
- 親要素の値を継承する
box-sizingの記述方法
記述方法はいたって簡単！！
-webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box;
これで、OKです。
※ベンダープレフィックスもつけておきましょう。
「content-box(デフォルト)」と「border-box」を比較してみる。
それでは、表示状態はどう違うのか確認してみましょう。
まず、html(2つのが300pxのBoxを用意)
※ちなみに2つのclassに半角スペースで2つのclassを指定してます。
<div class="box p01">content-box(デフォルトの場合)</div> <div class="box p02">border-boxの場合</div>
んで、CSS
.box {
margin-bottom: 10px;
border: 5px dashed red;
padding: 20px;
width: 300px;
height: 100px;
background-color: #ffdede;
}
.p02 {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
こちらがサンプルです。2つのwidthの長さが違うことがわかりますね。
box-sizingのブラウザ対応
残念ながらIE7には対応していないようなので、個別に設定する必要があります。
まず、htmlのDOCTYPE宣言にコンディショナルコメントで、あらかじめIE用のclassを設定しておきます。
<!--[if lt IE 7]> <html class="ie6" lang="ja"> <![endif]--> <!--[if IE 7]> <html class="ie7" lang="ja"> <![endif]--> <!--[if IE 8]> <html class="ie8" lang="ja"> <![endif]--> <!--[if gt IE 8]><!--> <!--<![endif]-->
そして、IE版だけ個別のCSSプロパティを記述します。（面倒くさいですね）
通常のBoxレイアウトならwidthをpx指定、レスポンシブルなら％指定ってとこでしょうかね。
.ie7 .box {
width:250px;
height:50px;
}
※borderとpaddingの分のpxを引き算します。（めんどくせー、他に方法ないんですかね？）
（ちょいと脱線）コンディショナルコメントとは？？
別名「条件付きコメント」と言いまして、コメントに条件を記載することでその部分の表示・非表示を制御することが出来るIE（Internet Explorer）の独自の仕様です。
これを利用して、IEのバージョンごとにclassをつけることで、特定のバージョンのieに個別のCSSプロパティを設定できます。
まとめ
今まで、paddingやborderの数値も計算して、Boxの値を決めていかないといけなかったのですが、box-sizingを使うことで、手間が大幅にはぶけそうですね(・∀・)
さらに、このbox-sizingはスマホサイトやレスポンシブwebデザインの時に大いに役に立ちそうです(・∀・)
積極的にドンドン使っていこうと思います。以上、＠Kc_fujiでしたm(_ _)m
