CSS box-sizing:border-box 余白/枠を横幅 高さに含める方法

CSS

CSS box-sizing:border-boxで余白と枠を横幅高さに含める

2022年8月24日

今回は、要素の枠線(border)やpaddingで取った余白などを要素の幅・高さ(width・height)に含めるかどうかを指定することができるプロパティ「box-sizing」の使い方を解説します。

CSS box-sizingを設定するときとしない時の違い
 

 

 

 

box-sizingの意味と使い方

box-sizingはborderやpaddingで指定される枠線や余白の大きさを要素の幅・高さ(width・height)に含めるかどうかを指定することができるCSSプロパティです。

例えば「width: 500px」や「height: 500px」などと指定している要素に追加でpaddingやborderを指定すると、デフォルトではその分だけ要素の横幅や高さが大きくなってしまいます。

box-sizingを指定していない時は、paddingやborderの分だけ要素の横幅や高さが大きくなる

ただし、場合によってはこれだと困るという場合があったり、後述する「width: 100%指定」をする際に、親要素が子要素からはみ出てしまうといったことが起きてしまったりするので、こうならない為にbox-sizingプロパティの指定が必要になります。

box-sizingプロパティ

borderやpaddingで生じる枠線や余白の大きさを要素の幅・高さ(width・height)に含めるかどうかを指定することができるCSSプロパティ

 

 

box-sizingでよく使用される値

それではbox-sizingプロパティでよく使用される値について解説していきます。

box-sizingプロパティでよく使われる値は以下の2つです。

■box-sizingでよく使用される値

  • box-sizing:border-box→paddingとborderを要素の幅・高さ(width・height)に含める
  • box-sizing:content-box(初期値)→paddingとborderを要素の幅・高さ(width・height)に含めない

 

このうち、指定できる値には「border-box」と「content-box(初期値)」がありますが、子要素を親要素にピッタリとはめ込むことがしやすくなるという点で基本的には「border-box」を指定してあげるのがおすすめです。
 

border-boxはpaddingとborderを要素の幅・高さ(width・height)に含める

1つ目の値は、border-box:border-boxです。

paddingとborderを要素の幅・高さ(width・height)に含めることができるようになります。基本的には各要素にborder-boxを設定しておくと横幅と高さの計算が楽なのでおすすめです。

border-boxの解説図

bnorder-boxの使用例

上の例ではpaddingやborderの長さがwidth、heightの中に含まれるようになる為、実際の要素の横幅・高さは420px(500 - 30×2 -10×2) となります。

 

全ての要素にborder-boxを適用させておく設定

あらかじめ「box-sizing: border-box」を全ての要素に適用させておくと横幅や高さの指定が楽になるのでおすすめです。

全ての要素に同じ指定をしたい場合は、以下のように全称セレクター(*)を使用してあげればOKです。

これで全ての要素や、その擬似要素before、afterに対してborder-boxの指定をすることが可能です。
 

なお、リセットCSS(ノーマライズCSS/サニタイズCSS)を利用している方は、リセットCSS側で上記のようなbox-sizing:border-boxの設定がされている場合もあります。

(関連記事)【リセットCSSとは】使い方やおすすめのリセットCSSを紹介

content-box(初期値):paddingとborderを要素の幅・高さ(width・height)に含めない

2つ目の値は、content-boxです。

こちらはbox-sizingプロパティに何も指定していない場合に初期値として設定されている値で、paddingとborderを要素の幅・高さ(width・height)に含めないという設定にすることができます。

content-boxの解説図

content-boxの使用例

上の例ではpaddingで上下左右に取った30pxとborderで上下左右に取った10pxが上乗せされて横幅・高さがともに580px(500 + 30×2 + 10×2)となっていることが分かります。

content-boxを使用する上でのデメリット

なおbox-sizing: content-boxを使用する際は注意が必要で、width: 100%とセットで使用すると親要素の幅を子要素の幅が超えてしまうといったデメリットがあります。

width設定時の注意点

 ■(参考)実際に子要素が親要素の横幅を超えてしまっている例

paddingの分だけ子要素が親要素からはみ出てしまっているデモ。

その為、「width: 100%」を指定して子要素が親要素内にかっちりとはまるようにしてあげるにはborder-boxを指定してあげる必要があります。

border-boxを使用するメリット

 
 

まとめ

まとめです。今回はpaddingやborderの大きさを要素の幅・高さ(width・height)に含めるかどうかを指定することができるプロパティ「box-sizing」の使い方や使用できる値を紹介しました。

border-boxの解説図

content-boxの解説図

指定できる値には「border-box」と「content-box(初期値)」がありますが、子要素を親要素にピッタリとはめ込むことがしやすくなるという点で基本的には「border-box」を指定してあげるのがおすすめです。

また、予め全ての要素に対してbox-sizingの指定をしておきたい場合は全称セレクター(*)を使用して設定してあげると良いでしょう。

今回は以上になります。最後までご覧頂き、ありがとうございます。

「業者に任せたけど、更新ができない」「本で独学は時間がかかりすぎる・・」そんなお悩みの方も多いのではないでしょうか。

個別指導形式のスクールでは、自分の知りたいことをピンポイントで学習・達成でき、自分で更新もできるというメリットもあります。
教室の無料事前相談もしておりますので、まずはお気軽にご登録ください。

詳細はこちら

YouTubeチャンネル開設しました!

WEBST8 YouTube Channel 開設
最大月間50万PVの当ブログをベースに、Youtube動画配信にてWordPress、ホームページ作成、ブログのことについてお役立ち情報を随時配信していきます。

ご興味ある方はぜひチャンネル登録をしていただけますと幸いです。

おすすめ記事3選

【WordPressの始め方総まとめ】ワードプレスブログの作り方9STEP

【おすすめレンタルサーバー比較総まとめ】WordPress対応5社

国内シェア上位のエックスサーバー、ロリポップ、さくらのレンタルサーバ、およびConoHa WING、mixhostを中心にWordPressおすすめレンタルサーバーを比較・紹介していきます。これからWordPressでホームページやブログを開設するためにレンタルサーバー選びを検討している方はこちらをご覧ください。

【WordPressの始め方総まとめ】ワードプレスブログの作り方9STEP

WordPressの始め方総まとめ

WordPress(ワードプレス)でブログを始めようと思った時に、サーバー・ドメインの手続きなどわからないことだらけで困っているというお悩みをお持ちの方も多いのではないでしょうか。本記事では、WordPressでブログやアフィリエイトを始めたい初心者を対象にWordPressの始め方をご紹介していきます。

【総まとめ】WordPress(ワードプレス)ホームページ作り方

【総まとめ】WordPress(ワードプレス)ホームページ作り方

WordPressでホームページを自作しようと思った際に、「ドメイン?サーバー?たくさん調べることがあって何から手をつけたら良いのかわからない」というかたも多いのではないでしょうか。この記事ではWordPress初心者の方を対象にWordPressでホームページを作る方法をご紹介していきます。

-CSS