カテゴリー

キーワード

 
> 【css3】cssのbox-sizingプロ...

【css3】cssのbox-sizingプロパティ、box-sizing:border-box;を紹介します


2015 年 12 月 2 日 投稿    view: 8018
タグ:
このエントリーをはてなブックマークに追加

css3 box-sizing

こんにちは、Webマーケティング部の杉尾です。

少し間が空きましたが、CSSのプロパティを紹介します。

 

今回はcss3のbox-sizingプロパティです。

 

box-sizingとは

box-sizingはボックスサイズの算出方法を指定します。

 

box-sizing:content-box;
box-sizing:border-box;
box-sizing:inherit;

 

の3つがあります。

よく使われるのは、box-sizing:border-box;です。

 

これは、widthを指定してしまえば、border、paddingを含めた要素が横幅に収めることができるものです。
(高さを指定している場合は高さも)

 

下図をご覧ください。

 

box-sizingがよくわかる図

 

少し説明を加えます。

 

上のbox-sizing:content-box;は初期値です。

普段は、これを書く必要はありません。

 

box-sizingを何も指定していない場合と同じ状態ということですね。

 

それから、下の方はbox-sizing:border-box;を指定しています。
これを指定することで『要素全体の横幅がwidthと等しく』(高さを指定している場合は高さも)なります。

 

上下の四角をそれぞれdiv要素と考えてみると、わかりやすいかと思います。

 

divに対して普通にpaddingとborderをつけると、widthより大きくなりますよね。

ですが、box-sizing:border-box;をつけると、横幅(と高さ)がwidth(height)内に収まるようになります。

 

ちなみに、box-sizing:inherit;にすると、親要素の値を受け継ぐことになります。

 

これ以外にも、box-sizing:padding-box; という値がありましたが、現在は仕様から削除されています。

 

box-sizingを実際に指定してみる

【HTML、CSS】

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>border-box</title>
<style>
div.upper {
    width: 400px;
    height: 100px;
    margin:20px;
    padding: 20px ;
    border: 10px solid #FF5722;
    background-color:#DED5D2;
}
div.lower{
    width: 400px;
    height: 100px;
    margin:20px;
    padding: 20px ;
    border: 10px solid #FF5722;
    box-sizing: border-box;
    background-color:#DED5D2;
}
</style>
<body>
    <div class="upper"></div>
    <div class="lower"></div>
</body>
</html>

IE8でもベンダープレフィックスなしで実装可能です。

本来ならCSS短縮化のためにまとめて書きますが、わかりやすいため重複する指定もあえて残しています。
(たとえばwidthやheight)
テスト仕様される場合は構いませんが、本運用される場合、CSS部分は別ファイルに書き、外部スタイルシートとして読み込んでください。

 

外部スタイルシートの指定方法はこちらをご覧ください。

【CSS】CSSの書き方と外部スタイルシート設定方法を紹介します

 

これをブラウザで見ると下図のようになります。

 

box-sizing:content-box;とbox-sizing:border-box;の比較画像

 

これだけではわかりにくいので、画像を加工して説明を入れました。

 

box-sizing:content-box;とbox-sizing:border-box;の比較画像を加工したもの

 

上のdivの中に元々、widthとheightで指定したときの値を示した茶色の四角形を入れてみました。

 

 

box-sizingをいつどこで使うか

レスポンシブデザインのサイトで有効です。

 

最近流行りのデザインは画面いっぱいに要素(画像など)を広げることが多い傾向にあります。

それに対応して、横幅は%(パーセント)で指定することが多くなっています。

 

一つの要素でそれをするのでしたら、特に問題はありませんが、これが二つの横並びの要素ですと話が途端にややこしくなります。

 

たとえば、こういうときです。

 

【HTML、CSS】

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>border-box</title>
<style>
body {
    width:400px;
}
div.left {
    width: 50%;
    height: 100px;
    padding: 20px ;
    border: 10px solid #FF5722;
    background-color:#DED5D2;
    float:left;
}
div.right {
    width: 50%;
    height: 100px;
    padding: 20px ;
    border: 10px solid #FF5722;
    box-sizing: border-box;
    background-color:#DED5D2;
    float:left;
}
</style>
<body>
    <div class="left"></div>
    <div class="right"></div>
</body>
</html>

 

一般的にはbodyにwidthをつけませんが、ここでは便宜的に指定しています。

 

上記のCSSですと、このように表示されます。

box-sizing:content-box;とbox-sizing:border-box;を指定したdivを横並びにした図

 

二つとも50%という指定をしているのに、なぜ横並びにならないかというと、paddingとborderがあるせいです。

div.leftとdiv.rightは本来同じ大きさ(横幅も高さも)のはずです。

 

しかし、div.leftには、box-sizing: border-box;という指定がされていないので、paddingとborderが横幅と高さに加算されています

 

ではそれを踏まえて、div.leftのCSSにも、box-sizing: border-box;を指定してみます。

 

こんな感じです。

 

【CSS部分のみ抜粋】

div.left {
    width: 50%;
    height: 100px;
    padding: 20px ;
    border: 10px solid #FF5722;
    background-color:#DED5D2;
    float:left;
    box-sizing: border-box;/*--- 追記部分 ---*/
}

 

こうすると、下図のようになります。

 

 

ちゃんと横並びになっていますね。

 

これを使えば、widthを48%にして、その分の余った2%をborderに回して……、などと考えずに良くなります。

widthを指定しておけば、その中でborderとpaddingの分を処理してくれるからですね。

 

box-sizingの実装方法

サイトに導入する場合はこう書きましょう。

 

*, *:before, *:after {
    box-sizing: border-box;
}

 

『*』はユニバーサルセレクタ(全称セレクタ)と言って、すべての要素に適用したいときに指定します。

box-sizing: border-box;の設定をずっと使うという方は、これをCSSのリセット部分(各ブラウザによってデフォルト設定されているCSSを均一化するもの)に付け加えておくと便利です。

 

こういう指定をしていることを忘れて、思い通りの装飾ができないということがないようにしてください。

 

なお、ユニバーサルセレクタにこういう指定をすると、ページ表示速度が落ちるのではないかという疑問があるかもしれませんが、どうやら大きな差はないようです。

 

気になる方は詳しくお調べすることをオススメします。

 

 

box-sizingのブラウザ対応状況

IE8から対応しています。

 

IE7は本格的に切り捨ててよいブラウザシェア状況ですので、もう問題なく使えると言ってよいと思います。

 

ちなみに、ブラウザ対応状況を確認するときにいつも使うサイト『Can I use.com』で見るとこんな感じです。

 

Can I use.comの画像、Box-sizingのブラウザ対応状況

 

まだ【CR(勧告候補)】ですが、ほぼ全てのブラウザが対応していると言って良さそうですね。

 

少し前でしたらベンダープレフィックス(-webkitや-moz)が必要でしたが、今はもういらないようです。

 

IE8でもベンダープレフィックスなしで実装可能です。

 

ベンダープレフィックスについてはこちらをどうぞ
【CSS3】 ベンダープレフィックスとは? (プロパティによっては不要)
 

 

まとめ

たった一行の指定で、面倒な計算をしなくて済むのは嬉しいですね。

理解していまえば、実装自体は簡単なので積極的に使ってみてください。

 

 

最後までお読みいただき、ありがとうございました。

 

 

 

杉尾成行 顔写真

この記事を書いた人

杉尾成行

株式会社SceneLive Webマーケティング部長

ウェブマーケティングコンサルタントとして、クライアントのウェブ集客をサポートしている。
また、ウェブ制作、システム制作にも携わり、数々のサイトを手掛けている。
当ホームページ、ブログシステムも制作。

前職:ライター、小説家

ウェブマーケティングコンサルタントとしてのブログ
ウェブ参謀

個人ブログ(オリジナル小説他) ⇒ 35deFA

 


カテゴリー

タグ
この記事が気に入りましたら、是非、他の方にもシェアしてください。
このエントリーをはてなブックマークに追加
関連記事