box-sizing: border-box;が便利!box-sizingプロパティの使い方について詳しく解説【CSS】

最終更新日:

公開日:2024-11-21

ページ内に広告が含まれています。
box-sizing: border-box;が便利!box-sizingプロパティの使い方について詳しく解説【CSS】

要素がpaddingborderの分だけはみ出してしまう、といった事は無かったでしょうか?
そういった事が無いように出来るbox-sizingプロパティの使い方を詳しく解説していきます。

box-sizingプロパティとは

box-sizingプロパティは、要素の幅(width)と高さ(height)に内余白(padding)とボーダー(border)を含めるかどうかを指定出来るプロパティとなります。
例えば、以下のようなCSSがあった場合を例にあげると、

div {
    width: 300px;
    height: 100px;
    padding: 10px;
    border 2px solid #000;
}

含めない場合

幅と高さの中にpaddingborderを含めないので、

  • 幅 = 300px + 10px + 10px + 2px + 2px = 324px
  • 高さ = 100px + 10px + 10px + 2px + 2px = 124px

となり、paddingborderの値の分要素の幅が広がります

含める場合

幅と高さの中にpaddingborderが含まれているので、要素の幅は300px、高さは100pxとなります。
レスポンシブ化をするうえで、要素の幅と高さの計算をする必要が無いためこちらの方が手間がかかりません

box-sizingプロパティの使い方

box-sizingプロパティの使い方は以下のようになります。

div {
    box-sizing: 値;
}

上記のようにセレクタに対し、値を指定します。
指定出来る値は2つありますので、次の項目で解説していきます。

指定出来る値

box-sizingプロパティで指定出来る値は以下の2つとなります。

content-box

幅と高さにpaddingborderを含めません。
デフォルトでcontent-boxとなります。

border-box

幅と高さにpaddingborderを含めます。

上記のように、要素の幅と高さにpaddingborderを含めるかどうかを指定出来ます。
marginは外余白となり、要素の幅・高さに含まれません。

値がcontent-boxの場合

値がcontent-boxの場合は以下のようになります。

div {
    width: 100%;
    height: 100px;
    padding: 20px;
    border: 2px solid #000;
    background-color: #f2F2F2;
    box-sizing: content-box;
}

幅、高さともにpaddingborderの分が増えて、はみ出して表示されています。
はみ出さないように表示するには、widthheightの指定をはみ出す分を含めて計算しなければいけません。

値がborder-boxの場合

値がborder-boxの場合は以下のようになります。

div {
    width: 100%;
    height: 100px;
    padding: 20px;
    border: 2px solid #000;
    background-color: #f2F2F2;
    box-sizing: border-box;
}

指定した幅100%、高さ100pxの中にpaddingborderが含まれて表示されています。
指定した幅、高さに全て含まれていますので、はみ出す事はありません。

全ての要素や疑似要素に対してborder-boxを適応させる

コーディングの際は、全ての要素・疑似要素にあらかじめbox-sizing: border-box;を指定しておくと楽になります。
全ての要素・疑似要素に適応するには、以下のようにCSSで記述します。

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

セレクタの「*(アスタリスク)」を使用する事で全ての要素に適応させる事が出来ます。
古いバージョンのブラウザに対応する場合はベンダープレフィックス(-webkit-box-sizing: border-box;)で対応可能です。

さいごに

いかがでしたでしょうか。
今回は、box-sizingプロパティの使い方について詳しく解説しました。
あらかじめすべての要素・疑似要素にborder-boxを適応させておくとコーディングが楽になりますので、忘れずに記述するようにしておきましょう。

おすすめ記事

当ブログ運営者 ヒデ

北海道札幌市在住のフリーランスでWeb制作を行っているヒデです。Webコーディング(HTML・CSS・JSなど)やWordpressのカスタマイズ等のテクニック、困った時に確認できる分かりやすい解説を目標にして情報を発信していければと思っています。プロフィールはこちら

当サイトに関するご意見・ご感想・ご要望または仕事のご依頼は以下のフォームよりお願い致します。

お問い合わせ お仕事のご依頼

各SNSのフォローはこちらから

PAGE TOP