MENU
  1. ホーム
  2. その他
  3. CSSのbox-sizingで表示崩れをバッチリ解決する方法

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、横並びレイアウトの強い味方です。
ぜひ活用して、崩れ知らずの素敵サイトを作ってくださいね！

その他

この記事を書いた人

侍エンジニア編集部のアバター 侍エンジニア編集部

【プロフィール】
DX認定取得事業者に選定されている株式会社SAMURAIのマーケティング・コミュニケーション部が運営。「質の高いIT教育を、すべての人に」をミッションに、IT・プログラミングを学び始めた初学者の方に向け記事を執筆。
累計指導者数4万5,000名以上のプログラミングスクール「侍エンジニア」、累計登録者数1万8,000人以上のオンライン学習サービス「侍テラコヤ」で扱う教材開発のノウハウ、2013年の創業から運営で得た知見に基づき、記事の執筆だけでなく編集・監修も担当しています。
【専門分野】
IT/Web開発/AI・ロボット開発/インフラ開発/ゲーム開発/AI/Webデザイン

この著者の記事一覧へ
目次