• HOME > 
  • CSS > 
  • CSSのbox-sizingの使い方【初心者にもわかりやすく...

CSSのbox-sizingの使い方【初心者にもわかりやすく解説】

投稿日:

このページにはGoogleアドセンス広告とアフィリエイト広告が含まれています。

カテゴリー記事のアイキャッチ画像

本記事は執筆時点(2022年01月28日)の情報をベースにしております。掲載している情報が最新ではない可能性がありますので何卒ご容赦ください。

広告
広告

box-sizingとは?

box-sizingプロパティは、要素の幅(width)と高さ(height)にborderの太さとpaddingの余白のサイズを含めるかどうかを指定するために使用します。

レスポンシブ化には「box-sizing:border-box」の指定が必須

このプロパティには、初期値である「content-box」をはじめ指定できる値が3つ存在しますが、その中でも「border-box」は、現在のWEBサイト制作において必須と言っても過言ではないレスポンシブ化を行うためには欠かすことができません。

box-sizing:border-boxが必要な理由

では、box-sizing:border-boxを指定しないとどのようなことが起きるか、具体的に例を見ながら確認しましょう。

次のような例を見てみましょう。

この段階ではbox-sizingを記載しないので、初期値である「content-box」の状態になっています。

HTML

<div class="test">
    <div class="box">ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト</div>
</div>

CSS

.test{
    background:#e9e9e9;
    padding:10px;
}
.box{
    width:100%;
    background:#999;
    margin:30px auto;
    padding: 0;
}

プレビュー

width:100%を指定した場合

この段階では、子要素は親要素の幅に中におさまっていて何の問題もありません。

しかし、borderやpaddingを指定するとどうなるでしょうか?

borderを指定するとborderの太さの分はみ出てしまう

では、先程の例の子要素にborderを加えたものを追記してみましょう。

まだbox-sizingを記載しないので、初期値である「content-box」の状態です。

HTML

<div class="test">
    <div class="box">ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト</div>
    <div id="border" class="box">ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト</div>
</div>

CSS

.test{
    background:#e9e9e9;
}
.box{
    width:100%;
    background:#999;
    margin:30px auto;
    padding: 0;
}
#border.box{/*borderの太さの分はみ出ます*/
    border:solid 10px #666;
}

プレビュー

borderを指定した場合

widthにborderの太さをが含まれない状態なので、親要素からborderの幅の部分だけはみ出してしまっています。

paddingを指定した場合もはみ出る

続いて、paddingを追記したものも確認して見ましょう。

HTML

<div class="test">
    <div class="box">ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト</div>
    <div id="border" class="box">ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト</div>
    <div id="padding" class="box">ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト</div>
</div>

CSS

.test{
    background:#e9e9e9;
}
.box{
    width:100%;
    background:#999;
    margin:30px auto;
    padding: 0;
}
#border.box{/*borderの太さの分はみ出ます*/
    border:solid 10px #666;
}
#padding.box{/*paddingの分はみ出ます*/
    border:solid 10px #666;
    padding:30px;
}

プレビュー

paddingを指定した場合

paddingにおいても同様にwidthにサイズが含まれない状態なので、親要素からborderの幅とpaddingの幅がはみ出してしまっています。

画面サイズが狭まるとコンテンツが見切れてしまう

先程の例で、画面サイズが狭まるとどうなるでしょうか?

プレビュー

ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト
ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト
ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト

画面幅目一杯にするためにwidth:100%を指定しているにも関わらず、画面サイズ(幅)が狭まったときにコンテンツ画面の外にはみ出してしまいます。

いちいちborderの幅やpaddingの余白を気にして要素の幅を指定するのは非常に困難です。

そこで使用するのがborder-boxという訳です。

box-sizing:border-boxを指定して表示を確認する

では、box-sizing:border-boxを追記してみましょう。

CSS

.box{
    box-sizing:border-box;
}

プレビュー

border-boxを指定した場合

widthの中にborderの太さとpaddingの余白のサイズが含まれるようになり、親要素からはみ出すことがなくなりました。

様々な画面サイズへの対応が必要な現在では必須とも言える

意図せず画面からコンテンツがはみ出してしまうようでは、ユーザビリティが低下してしまいます。

どんな画面サイズで表示しても問題がないようレスポンシブ対応するためにはwidthの中にborderやpaddingなども含めていた方が幅の指定を行いやすいので、box-sizing:border-boxを記述するようにしましょう。

box-sizingの値

冒頭でも触れましたが、box-sizingプロパティで指定できる値は、初期値である「content-box」と「border-box」、そして「inherit」の3つです。

content-box要素の幅(width)と高さ(height)にborderの太さとpaddingの余白のサイズを含めない
border-box要素の幅(width)と高さ(height)にborderの太さとpaddingの余白のサイズを含める
inherit親要素に指定されたbox-sizingの値を引き継ぐ

border-boxだけ覚えておけばOK

しかしながら、box-sizingプロパティを使う際はほとんどがborder-boxを指定するハズなのでこの一つだけ覚えておけば十分だと思います。

初期値である「content-box」を指定し直す機会はないと思いますし、後述しますがborder-boxは一括で指定してしまった方が楽なので、わざわざ「inherit」を使う必要はありません。

はじめに一括で指定しておくと楽

その都度その都度、作成した要素にborder-boxを指定していては非常に手間です。

style.css等の冒頭で一括で指定しておいた方がその後のスタイリング作業がスムーズです。

全ての要素を対象にするセレクタは「*」(アスタリスク)です。

CSS

*{
 box-sizing:border-box;
}

このようにstyle.cssの冒頭に記述しておけば、すべての要素が幅と高さにborderとmarginを含んだ状態になります。

リセットCSSに記述されていることもある

レスポンシブ化が必須となった昨今では上記のようにはじめからborder-boxを指定してしまうのが主流です。

メジャーなリセットCSSのひとつである「sanitize.css」でもあらかじめborder-boxが指定してあり、ブラウザ間のデフォルトCSSの差異を無くすだけでなく、レスポンシブ化もしやすくされています。

リンク先のサムネイル
CSSのリセットCSSの使い方

リセットCSSは、ブラウザのデフォルトCSSによってはじめから指定いされているスタイルをリセットする(打ち消す)ために使うCSSです。・・・

まとめ

一括で指定してしまう方法が主流なのでサイト制作時のはじめにstyle.cssに記述したっきり使う機会はなくなるかもしれません。

あらかじめborder-boxが記述されているワードプレスのテーマなどを使っていると、そもそもbox-sizingの存在にすら出会わないかもしれません。

重要なのはbox-sizingの存在を理解することで、border-boxのおかげで幅と高さが指定しやすくなっているということを忘れないでおきましょう。

広告
広告

関連する記事

サムネイル

CSSでPNG画像に影を落とす方法【filterプロパティd……

2025年01月15日
CSSでドロップシャドウをつけるには? CSSで要素に影(ドロップシャドウ)を付ける手段としては「box-shadow」や「text-shadow(テキストの場 […]
サムネイル

CSSのfilterプロパティの関数の種類と効果をまとめ【フ……

2025年01月06日
最終更新日:2025年01月15日
IEのサポートが終了したので、これまで使う機会の少なかったfilterプロパティを改めて調べたところ、CSSでの表現の幅を広げてくれる画期的なプロパティだと気づ […]
サムネイル

CSSで写真にぼかし加工を加える方法【filterプロパティ……

2025年01月06日
CSSだけで写真をぼかせる? CSSのfilterプロパティのblur()関数を使うと、画像(要素)にぼかしを加えることができます。 画像編集ソフトを使うことな […]
サムネイル

CSSで写真の明るさ(明度)を調整する方法【filterプロ……

2025年01月06日
CSSだけで画像の明度を調整できる? CSSのfilterプロパティのbrightness()関数を使うと、画像(要素)の明るさを変更することができます。 画像 […]
サムネイル

CSSで写真のコントラストを変更する方法【filterプロパ……

2025年01月06日
CSSだけで写真のコントラストを調整できる? CSSのfilterプロパティのcontrast()関数を使うと、画像(要素)のコントラストを変更することができま […]
サムネイル

CSSで写真を白黒に変更する方法【filterプロパティgr……

2025年01月06日
CSSだけで写真を白黒にできる? CSSのfilterプロパティのgrayscale()関数を使うと、画像(要素)を白黒に変更することができます。 グレースケー […]
サムネイル

CSSで写真をセピアに加工する方法【filterプロパティs……

2025年01月06日
CSSで写真をセピアに加工できる? CSSのfilterプロパティのsepia()関数を使うと、画像をセピア色に変換できます。 画像編集ソフトを使うことなくCS […]