A Little Each Day

note to self

box-sizing: border-box;の使い方

こんにちは。本日はCSS3から使えるようになったborder-boxについて説明したいと思います。

border-boxを使えば要素内のborderとpaddingを含めて要素の幅や高さを自動で計算してくれるのですごく便利です。

レイアウトとしては画像の横並びや段組み(メインとサイドバーとか)の時に要素間にスペースを開けたい時に使えるかと思います。

バージョン

HTML5
CSS3


そもそもborder-boxとは?

box-sizingプロパティはボックスのサイズを算出するために使います。
デフォルトではcontent-boxが適応されます。これは表にもあるようにborderやpaddingを含めません。
しかしながら、それだと要素間にスペースを空けた時にその分だけ幅や高さを計算しなければなりません。めんどくさいし、計算が間違っていたらレイアウト崩れが発生してしまいますね。

border-boxはcontent-boxと違い要素にborderとpaddingを含めます。
するとスペースを空けた時にその分だけ含めるので複雑な計算をしなくてすむようになります。

content-box borderとpaddingを幅と高さに含めない
border-box borderとpaddingを幅と高さに含める

普通のレイアウトの場合

では実際にレイアウトを組んでいきましょう。

<!-- コンテンツの外枠 -->
<div class="box-wrapper">
  <!-- ここから各コンテンツ -->
  <div class="box">
    <div class="box-inner orange">要素1</div>
  </div>
  <div class="box">
    <div class="box-inner yellow">要素2</div>
  </div>
  <div class="box">
    <div class="box-inner gray">要素3</div>
  </div>
  <div class="box">
    <div class="box-inner skyblue">要素4</div>
  </div>
</div>
/* コンテンツの外枠 */
.box-wrapper{
  width: 100%;
}
/* ここから各コンテンツ */
.box{
  width: 25%;
  float: left;
}
.box-inner{
  height: 100px;
}
.orange{
  background-color: orange;
}
.yellow{
  background-color: yellow;
}
.gray{
  background-color: gray;
}
.skyblue{
  background-color: skyblue;
}


要素の外枠を幅100%、各要素の幅を25%に設定しました。
つまり各要素が横に4つ並ぶレイアウトです。


この段階でブラウザで見てみると...


f:id:chi_kun:20160519022444p:plain


当たり前ですが要素が横に並んでいるだけですね。


それでは各要素間を空けるために各要素の外枠(この場合はboxクラス)にpaddingを加えてスペースを空けてみましょう。

.box{
  width: 25%;
  float: left;
  /* ここを追加 */
  padding: 0 20px;
}


すると...


f:id:chi_kun:20160519023336p:plain


あれ?一応要素間のスペースは空いたけどレイアウトが崩れている...
本来なら要素を4つ横に並べたいのに最後の要素がカラム落ちしてしまいましたね。

これは外枠が幅100%なのに各要素の幅25%+padding20px が外枠の幅100%を超えてしまったのでカラム落ちが発生している状態です。

この現象を直すために次にborder-boxを使いレイアウトを修正して行きましょう。

実際にborder-boxを使ってみる

border-boxを使えば上記のレイアウト崩れを簡単に直すことができます。
border-boxは boz-sizing: border-box; をcssファイルに書くだけです。

ここで注意なのですがborder-boxは全要素に対して指定したほうがレイアウトの管理が簡単になるので * を使って指定します。
(* を使えばサイト全体に適応できます。)

/* すべての要素に適応 */
*{
  box-sizing: border-box;
}


すると...


f:id:chi_kun:20160519024226p:plain


カラム落ちが修正されて、きちんと4つの要素が横並びになってますね。


フロントエンドで要素の横並び(画像一覧とか)を実装することが多いと思いますが、border-boxを使えば要素間のスペースを簡単に空けることができます。

また昨今はレスポンシブwebデザインを実装することが多いので、border-boxを使えばデバイスごとに要素間のスペースの大きさを自在に変えることができるし、面倒な幅や高さの計算をしないでコードをかけるようになります。

すごく便利な機能なのでぜひ使ってみてください。



本日は以上です。