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

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

投稿日:

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

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

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のメディアクエリでスマホでのホバーの挙動の対策を行う【……

2023年10月01日
最終更新日:2023年09月28日
要素をタップしたときにホバー時のスタイルが適用され続けるという経験はありませんか?CSSだけで簡単にスマホでの疑似要素「hover」の挙動の対策を行う方法をご紹介します。
サムネイル

CSSの疑似クラス「:focus」の使い方【focus-wi……

2023年05月01日
最終更新日:2023年05月31日
CSSでは疑似クラスである「:focus」を用いることで、フォーカス時のスタイルを設定することが可能です。一方「:focus-within」は、その要素自体もしくは子要素にフォーカスがある状態で有効になります。
サムネイル

CSSのclamp()・max()・min()の使い方【プロ……

2023年01月16日
最終更新日:2023年03月10日
clamp()・max()・min()はCSSのプロパティの値の指定に利用できる比較関数です。複数の値を比較し1つの値を導きだし上限や下限を設定できます。
サムネイル

CSSのfont-feature-settingsの使い方【……

2023年01月16日
最終更新日:2023年03月10日
font-feature-settingsは、文字本来のサイズに応じてフォントの文字詰め(カーニング)を設定するためのプロパティです。
サムネイル

CSSのletter-spacingで文字間隔を設定【中央寄……

2023年01月16日
最終更新日:2023年03月10日
letter-spacingは、テキストの文字と文字との間隔を設定するためのプロパティです。文字と文字の間を狭めたり、広げたりしてバランスを整えることができます。
サムネイル

CSSのtext-emphasisの使い方【圏点(けんてん)……

2023年01月16日
最終更新日:2023年03月10日
text-emphasisは、文字を強調したいときに付け加える圏点(けんてん)を表示するプロパティです。圏点のスタイル(形状)と色を自由に設定することが可能です。
サムネイル

CSSで中国語フォントを表示させる方法【font-famil……

2022年10月28日
最終更新日:2023年03月10日
簡体字を使用するにはサイトにGoogle FontsなどのWebフォントを導入して、CSSのfont-familyプロパティでそのフォントを指定します。