CSS

2021.04.21

【CSS】box-sizing:border-boxとは?要素がはみ出てしまう時に要チェック

コーディングをしていて、「なぜか指定したサイズにならない」「親要素からはみ出してしまう」ということはありませんか?

そんなときには、ぜひ「box-sizing」の指定をチェックしてみてください。

box-sizingとは

box-sizingは、幅(width)や高さ(height)の計算にpaddingborderを含めるか含めないかを決めるプロパティです。

box-sizingに指定できる値は、以下の2つです。

box-sizing:content-box (初期値)

box-sizingの初期値はcontent-boxで、幅や高さの計算にpaddingborderを含みません。

See the Pen box-sizing by spiqa design (@spiqa_design) on CodePen.

赤のボックスの幅(width)は200px、黒枠のボックスの幅も200pxですが、黒枠のボックスが赤のボックスからはみ出てしまっています。

これは、box-sizingの値がcontent-boxになっていることにより、黒枠のボックスの幅がwidth 200px + 左右padding20pxずつ 計40px + 左右border5pxずつ 計10px = 合計250pxの幅になっているためです。

box-sizing:border-box (おすすめの設定値)

box-sizingborder-boxにするとpaddingborderを含んで幅と高さが計算されます。

widthpaddingborderの指定は上記と全く同じでbox-sizingの値だけを変更したものがこちらです。

See the Pen box-sizing by spiqa design (@spiqa_design) on CodePen.

黒枠のボックスは、paddingborderも含んでwidthに指定されている200pxになるように計算されます。そのため、赤ボックスの幅とぴったり一致していますね。

box-sizing:border-box の指定方法

paddingborderはデザインによってあわせたり、レスポンシブの途中で変更したりすることがよくあります。

box-sizing:content-boxを指定しているとpadding / borderの値を変更する度に幅や高さの指定も変更する必要があります。

それはとても面倒で大変なので、box-sizing:border-boxを全ての要素に指定することをおすすめします!

▼全ての要素への指定方法

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

box-sizing指定の注意点

1点気をつけていただきたいのは、コーディングの途中でborder-boxの設定を変更しないことです。

LPのコーディングを進めているときに box-sizing:content-boxの指定を忘れていたからと、途中で指定をするとそれまでにコーディングしてきた箇所の見た目が大きく変わってしまうことがあります。

コーディングスピードにも大きく影響してくる内容なので、コーディング開始に漏れの内容にきちんと設定しましょう。リセットCSSなどいつも読み込むCSSに最初から書いておくのも良いですね!

box-sizingの確認方法

自分のサイトのbox-sizingの指定がどうなっているのかわからない!という方は検証ツールで確認できます。

以下Chromeでの例ですが、ページを右クリックして開くことができる検証ツールから、「Computed」を選択すると現在適用されているCSSを確認することができます。

今回はbox-sizingを確認したいので「box-s」くらいまで入力すると確認することができます。こちらに表示されていない場合は、「Show all」にチェックが入っているか確認してみてくださいね。

box-sizing:border-boxなのに要素がはみ出る場合のチェックポイント

左右のmarginがはみ出ている

box-sizingborder-boxでもmarginの値は自動計算の範囲に含まれません。
左右のmarginが悪さをしてはみ出ている可能性があるのでみて見てください。

See the Pen box-sizing by spiqa design (@spiqa_design) on CodePen.

擬似要素がはみ出ている

擬似要素は装飾としてよくposition:absoluteで配置して、leftrightにマイナス値を指定することがあります。
この擬似要素のマイナス値も要素からはみ出て意図せぬスクロールバーがでてしまう原因の1つです。

See the Pen box-sizing by spiqa design (@spiqa_design) on CodePen.

上記の2つ目のボックスのように「<」も含んだ幅で親要素(赤ボックス)で囲っておくと、他の要素に影響を与えることがないのでコーディングが進めやすくなると思います!

▼擬似要素についてはこちらでチェック

画像がはみ出ている

こちらはレスポンシブコーディング中によく起きてしまうことかと思います。

上の例の場合、赤いボックスはwidth:200pxなのに画像のwidth300pxなのでつき出てしまっています。
レスポンシブによって親要素の幅が縮まってきたときなどによく起きてしまう現象です。

解決方法としては、max-width:100%を追加することです。
画像の幅を300pxにしつつ、親要素の幅が300px以下になったらその幅に合わせて小さくなっていってくれます。

See the Pen box-sizing by spiqa design (@spiqa_design) on CodePen.

画像にはすべてwidth:100%をかけておいて、指定したい大きさをmax-widthに指定するという方法もあります。

自分のコーディングしやすい方法を採用してください!

img{
 width:300px; /* 表示したい大きさ */
 max-width:100%; /* 親要素より大きくならないように */
}

/* or */

img{
 width:100%; /* デフォルトは親要素と同じ大きさ */
 max-width:300px; /* 表示したい大きさより大きくならないように */
}

まとめ

コーディングを学び始めたとき、よく要素のはみ出しに悩まされていました・・。そして今も意図せぬはみ出しに遭遇することがあります・・!

原因の多くは今回ご紹介したもののどれかなので、検証ツールを使用して1つずつ確認すればきっと解消されると思います!

こちらもおすすめ!

関連記事

  • 2022.02.25

    【CSS】グーやパーに変形!マウスカーソルに掴む動作を実装する方法

    CSS

  • 2022.02.03

    Androidだけ崩れる!AndroidにだけCSSを効かせる方法

    CSS

    JavaScript

  • 2022.01.24

    効率的なCSS記述になる!inherit の使い方

    CSS

おすすめ記事

  • 2021.08.31

    超簡単!Wordpressにヒートマップを導入する方法

    WordPress

  • 2021.08.24

    現場で使える!WordPressおすすめ書籍(書評)

    WordPress

  • 2021.05.24

    初心者でもすぐに使えるjQueryが満載なおすすめ本【書評】

    JavaScript

WPサービス

×