【CSS】 ボックスサイズ設定の悩みを解決するbox-sizing: border-box;
ボックスサイズを決めるときに横幅や高さのちょっとした指定間違いだけでもボックスの横幅が均等に揃えない、段組みが崩れてしまうなど、レイアウト全体のバランスが崩れてしまう経験があるかと思います。
こんな時に要素の横幅や高さを均等に保たせる便利でプロパティがbox-sizing: border-box;です。
通常サイトに訪れたユーザーに見やすくわかりやすく見栄えのよいページのレイアウトを作るには、デザインの問題は置いといて、まず横幅や高さのバランスよいレイアウトは基本条件です。
そのために、コンテンツ内容の横幅(width)と高さ(height)、パディング(padding)、ボーダー(border)を指定するわけです。
通常ボックスの幅(width)と高さ(height)は内容領域の幅とパディング(padding)、そしてボーダー(border)を全部足したのが実際に目に見える描画されている幅(width)と高さ(height)です。
しかし、それぞれの幅と高さを指定するうちに、計算間違いで予期せぬボックスのバランス崩れが起きたりして頭を悩ませますが、ここで活躍するのがbox-sizingプロパティです。これを使うことで、柔軟なボックスサイズ指定ができます。
スポンサーリンク
| box-sizing：値； | |
|---|---|
| content-box | 幅(width)と高さ(height)の範囲は内容領域に限られます。パディング(padding)とボーダー(border)はその幅と高さに含まれず、別の幅と高さとなります。content-boxは初期値で、要素の大きさは、width、padding、borderで計算されます。 |
| border-box | 内容領域の幅(width)と高さ(height)はパディングとボーダーを含んだ範囲になります。 |
| inherit | 親要素の値を継承します。 |
下図のように、content-boxの全体の幅は、コンテンツ内容の幅とパディング、ボーダーの幅をすべて足した合計となります。
一方、border-boxの場合、要素全体の大きさが、widthの値となります。それにより要素のpaddingとborderの幅が要素のwidthを増やすことはありません。
下記の例では、同様のCSS条件をbox-sizingプロパティの「content-box;」と「border-box;」値にそれぞれつけてみました。
content-boxとborder-boxの違い
CSS
</style>.box-sizing { width:500px; height:150px; background-color:#999; border: 15px solid #333; padding:15px; box-sizing: content-box; }</style> |
スポンサーリンク
「content-box;」の場合、コンテンツ内容の横幅を100%に指定した場合は、パディングとボーダーの幅と合わせると実際描画される幅は100%を超える可能性が高くなります。
一方、「border-box;」の場合、同じ条件下でも全体の幅(width)がパディングとボーダーの幅を含んでいるので、それに影響を受けず上手く使えばレスポンシブなウェブサイト作りができるかもしれません。
border-boxを使って段組み作成する
また、段組み作成時に、ボックスに「box-sizing: border-box;」を指定することで、段組みの崩れなどを心配せずに設定することができます。
下記のように、横幅を100%に指定し2つのボックスを作るとした場合、左と右の2つのボックスをそれぞれのコンテンツ内容の表示領域を左60%、右40%に指定するだけで、パディングの幅指定と関係なく、またボックスが100%を超えてはみ出ることなく、ぴったり100%に合わせることができます。
CSS
<style> #leftboxs { float: left; width:60%; padding: 15px; background-color:#999; border: 20px solid #fc0082; box-sizing: border-box; } #rightboxs { float: left; width:40%; padding: 15px; border: 20px solid #fc0082; background-color:#333; box-sizing: border-box; }</style> |
HTML
<body> <div id="leftboxs"> LEFT</div> <div id="rightboxs"> RIGHT</div> </body> |
左と右のボックスにそれぞれ違うパディングとボーダー値を指定しても合わせて横幅100%を維持しているのがわかります。
スポンサーリンク