CSS

2021.11.09

【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つずつ確認すればきっと解消されると思います!

こちらもおすすめ!

この記事をシェアする

関連記事

  • 2023.12.29

    記事タイトルを行数で制御するCSS

    CSS

    コーディング

  • 2023.12.28

    色違いは必要ない!アイコンはcssで色を変えよう!

    CSS

    コーディング

  • 2023.11.14

    コーダー同士の情報のやり取りで効率がアップした話

    CSS

    コーディング

おすすめ記事

  • 2022.04.22

    【動画編集ソフト】アフターエフェクトとプレミアプロってなにが違うの?違いと使い分けを解説!

    制作

    動画

  • 好きなフォントは?現役WEBデザイナーに聞いてみた!

    2022.06.01

    デザイナーなら好きなフォントの1つや2つあるでしょ?現役WEBデザイナーに好きなフォント聞いてみた!

    デザイン

    制作

  • 2022.04.28

    【カメラ初心者向け】物撮りが上手くなるコツ ~食べ物編~

    その他

    制作

×