CSSのbox-sizingで表示崩れをバッチリ解決する方法

こんにちは! ライターのナナミです。

みなさんWEBサイトを作っていて、

レイアウトが崩れた…
幅とか高さが合わない…

なんてアクシデントに見舞われたりしていませんか?

今回はそんなアクシデントを解決してくれる、box-sizingについて解説していきます。

この記事は下記の流れで進めていきます。

【基礎】box-sizingとは何か
【基礎】box-sizingの使い方
【発展】box-sizingの使用例

ばっちり覚えて、レイアウト崩れなんかに負けないサイトを作っちゃいましょう!

box-sizingとは?

box-sizingは、要素の大きさの決まり方を指定するプロパティです。

下記の画像は、どちらも幅200px、高さ200px、padding20px、枠線5pxを指定しています。

box-sizing1

大きさが全然違いますね。

これは、要素の幅と高さの数値に、paddingと線の太さの数値が含まれているか含まれていないかの違いです。

box-sizing2

つまりbox-sizingは、paddingと線の太さを要素の大きさに含めるのか含めないのかを指定することができるのです。

そもそもpaddingや線とは?

要素は下記のように、外側の領域線の領域内側の領域文字などのコンテンツ自体で構成されています。

box-sizing3

paddingは、この内側の要素に余白をつけるプロパティです。
線の領域は、borderを指定したときに線が引かれる部分となっています。

デフォルトでは、幅や高さを指定はコンテンツ自体に付与されます。
paddingやborderは含めないのです。

しかしbox-sizingを指定すると、この仕組みを変えることができます。
paddingも線も含めて、指定した幅や高さにすることができるのです。

box-sizing4

対応ブラウザ

現在のカレントブラウザでは、問題なく使用することができます
オールドブラウザもIE9から対応しているので、現在使う分には問題ないですね。

どうしてもIE8などのかなり古いブラウザへの対応が必要な場合は、ベンダープレフィックスをつけるようにしましょう。
記述の頭に「-ms-」とつければOKです。

ベンダープレフィックスについて詳しく知りたい方は、下記のリファレンスを読んでみてください。
http://www.htmq.com/csskihon/603.shtml

box-sizingの使い方

box-sizingは、サイズの決まり方を変えたい要素に指定するだけでOKです。

基本形はこんな感じ。

CSS

セレクタ {
    box-sizing: 値;
}

値の部分で、大きさの決まり方を切り替えていきます。
下記のHTML、CSSを基本にして、それぞれどんな見栄えになるのか見てみましょう。

box-sizing5

HTML

<div class="box_test">
    paddingと枠線が指定されている要素
</div>
<div class="box_test2">
    幅・高さが200pxの要素
</div>

CSS

.box_test {
    height:  200px;             /* 高さ指定 */
    width:  200px;              /* 幅指定 */
    padding:  20px;             /* 余白指定 */
    border:  solid 5px;         /* 枠線指定 */
    background-color: #F44336;  /* 背景色指定 */
    display:  inline-block;     /* インラインブロックにする */
    vertical-align:  bottom;    /* 下揃えにする */
}

.box_test2 {
    height:  200px;             /* 高さ指定 */
    width:  200px;              /* 幅指定 */
    background-color: #2196F3;  /* 背景色指定 */
    display:  inline-block;     /* インラインブロックにする */
    vertical-align:  bottom;    /* 下揃えにする */
}

paddingや線を大きさに含めない:content-box

content-boxを指定した場合、paddingや線は幅や高さに含まれない状態になります。
これがデフォルトですね。

box-sizing5

CSS

.box_test {
    box-sizing:  content-box;
}

この状態だと、線まで含めた大きさは250pxになります。

paddingや線を大きさに含める:border-box

border-boxを指定した場合、content-boxとは逆の状態になります。
つまり、paddingや線が幅、高さに含まれる状態になるのです。

box-sizing6

CSS

.box_test {
    box-sizing: border-box;
}

この状態だと、要素の大きさは指定された幅、高さと同じになります。
線を含めて、縦も横も200pxということですね。

box-sizingの使用例

box-sizing、とっても便利なプロパティです。
どんな時に威力を発揮するのか、具体例を見ていきましょう。

大きさを揃えて指定したい

box-sizing-ex1

HTML

<div class="box_test">
    padding10px
</div>
<div class="box_test2">
    padding30px
</div>
<div class="box_test3">
    padding50px
</div>

CSS

.box_test {
    height:  200px;             /* 高さ指定 */
    width:  200px;              /* 幅指定 */
    padding:  10px;             /* 余白指定 */
    background-color: #F44336;  /* 背景色指定 */
    display:  inline-block;     /* インラインブロックにする */
    vertical-align:  bottom;    /* 下揃えにする */
    box-sizing: border-box;     /* 余白や線を幅と高さに含める */
}

.box_test2 {
    height:  200px;             /* 高さ指定 */
    width:  200px;              /* 幅指定 */
    padding:  30px;             /* 余白指定 */
    background-color: #2196F3;  /* 背景色指定 */
    display:  inline-block;     /* インラインブロックにする */
    vertical-align:  bottom;    /* 下揃えにする */
    box-sizing: border-box;     /* 余白や線を幅と高さに含める */
}

.box_test3 {
    height:  200px;             /* 高さ指定 */
    width:  200px;              /* 幅指定 */
    padding:  50px;             /* 余白指定 */
    background-color: #009688;  /* 背景色指定 */
    display:  inline-block;     /* インラインブロックにする */
    vertical-align:  bottom;    /* 下揃えにする */
    box-sizing: border-box;     /* 余白や線を幅と高さに含める */
}

paddingはバラバラだけど、要素自体は同じ大きさで配置したい…

なんてちょっとわがままなレイアウトでも、box-sizing:content-boxでバッチリです。

横並びにしたときに崩れないようにしたい

box-sizing-ex2

HTML

<div class="box_test">
    サイドバー
</div>
<div class="box_test2">
    メインコンテンツ
</div>

CSS

.box_test {
    height:  400px;             /* 高さ指定 */
    width:  200px;              /* 幅指定 */
    padding:  20px;             /* 余白指定 */
    background-color: #F44336;  /* 背景色指定 */
    display:  inline-block;     /* インラインブロックにする */
    vertical-align:  bottom;    /* 下揃えにする */
    box-sizing: border-box;     /* 余白や線を幅と高さに含める */
}

.box_test2 {
    height:  400px;             /* 高さ指定 */
    width:  400px;              /* 幅指定 */
    padding:  20px;             /* 余白指定 */
    background-color: #2196F3;  /* 背景色指定 */
    display:  inline-block;     /* インラインブロックにする */
    vertical-align:  bottom;    /* 下揃えにする */
    box-sizing: border-box;     /* 余白や線を幅と高さに含める */
}

サイドバーは200px、メインコンテンツは400pxで崩したくない!

なんて時にもbox-sizing:content-box
このように綺麗に配置できます。

幅やpaddingを%で指定したい

box-sizing-ex3

HTML

<div class="box_test">
    幅20%
</div>
<div class="box_test2">
    幅80%
</div>

CSS

.box_test {
    height:  400px;             /* 高さ指定 */
    width:  20%;                /* 幅指定 */
    padding:  2%;               /* 余白指定 */
    background-color: #F44336;  /* 背景色指定 */
    vertical-align:  bottom;    /* 下揃えにする */
    box-sizing: border-box;     /* 余白や線を幅と高さに含める */
    float: left;                /* 横並びにする */
}

.box_test2 {
    height:  400px;             /* 高さ指定 */
    width:  80%;                /* 幅指定 */
    padding:  2%;               /* 余白指定 */
    background-color: #2196F3;  /* 背景色指定 */
    vertical-align:  bottom;    /* 下揃えにする */
    box-sizing: border-box;     /* 余白や線を幅と高さに含める */
    float:  left;               /* 横並びにする */
}

パーセントで幅などを指定すると、画面が縮んだ時にガクンと崩れたりすることがありますよね…

こんな時にもbox-sizing:content-box
paddingのせいで要素の比率が変わる、なんてことがなくなるので安心して使うことができます。

まとめ

いかがでしたか?

box-sizing:content-box、横並びレイアウトの強い味方です。
ぜひ活用して、崩れ知らずの素敵サイトを作ってくださいね!

「プログラミング、右も左もわからない…」という方にオススメ

当プログラミングスクール「侍エンジニア塾」では、これまで6000人以上のエンジニアを輩出してきました。

その経験を通してプログラミング学習に成功する人は、「目的目標が明確でそれに合わせた学習プランがあること」「常に相談できる人がそばにいること」「自己解決能力が身につくこと」この3つが根付いている傾向を発見しました。

侍エンジニア塾は上記3つの成功ポイントを満たすようなサービス設計に磨きをかけております。

cta_under_bnr

「自分のスタイルや目的に合わせて学習を進めたいな」とお考えの方は、ぜひチェックしてみてください。

書いた人

ナナミ

1991年生まれ。
文系大学卒業後、フリーターを経てフロントエンジニアになる。
HTML、CSS、 jQueryなどのコーディングやCMS設計に従事。
文系からエンジニアを目指す人にもわかりやすい記事を目指して、日々精進中。
体は日本酒でできている。

おすすめコンテンツ

まずはここから!初心者でも1から学べるプログラミング入門カリキュラム

転職成功で受講料0円!あなたもプログラミングを学んでエンジニアデビュー