【box-sizing】CSSでのレイアウトをわかりやすくする!

2021/11/19

PC全般

t f B! P L

CSSでレイアウトをするときに考えなくてはいけないのがboxの大きさです。

一つの要素、例えば<h>要素や<p>要素を、または<div>や<header>などのセクションを一つの箱(box)と考えて配置してページを完成させていきます。

箱の大きさを決める際に、いくつかの値を決めなくてはいけません。

width

height

padding

border

これらの取り扱いをシンプルにする方法をご紹介します。


デフォルトの状態を見てみましょう

まずは以下のようなHTMLとCSSを記述しました。

HTML 

<body>
  <p class="p_1">こんにちは</p>
</body>

CSS

.p_1 {
  width: 500px;
  height: 500px;
  padding: 50px;
  border: 50px;
}

<p>要素の中に「こんにちは」と書いてあるだけの簡単な記述です。

それに縦と横の大きさを500、paddingを50、borderを50とCSSで指定しました。

すると以下のように表示されます。


中身の要素(白)の大きさをwidthとheightで500と決めたことになります。

padding(緑)の50

border(青)の50

それぞれが足されて(両サイドにあるので合計200ですね)追加されます。

ということで、boxの大きさは700になりました!


自分ではどこにも700なんて記述していないのに自動でそうなってしまいます。

こうなると全体のレイアウトを決めるときに若干不便ですよね。


今回は50とか500とか、切りのいい数字で説明していますが、ふだんはもっと細かい数字で値を指定していくので、計算が複雑になってしまいます。



box-sixing:border-box: を指定した場合

デフォルトの状態だと中身の大きさを決めることになり、外側の箱の大きさは計算しないとわかりませんでした。

これだと毎回、widthとheightを指定した後に、paddingとborderの値をたしてあげてその箱の大きさがやっとわかる、ということになります。


ここで紹介するbox-sixing:border-boxというプロパティを指定していると、paddingとborderを含めたものが、widthとheightになります

以下で見てみましょう

同じようにwidthとheightをそれぞれ500pxにしてあげました。


デフォルトの状態と違って、外側の値を500と決めたことになります。

そうすると自動的に中身の<p>要素の大きさが300になりました。

指定したborderの値である50と、paddingの値である50を足して(両サイドにあるので200)合計で500になっていることがわかると思います。

デフォルトの設定よりもダイレクトにboxの大きさを決めることができるので便利ですね!


まとめ:box-sizingプロパティを最初に設定しよう

ということで、box-sizingというプロパティでborder-boxを設定してあげて、boxを使ったレイアウトをより直感的に行うことができるようになりました。

box-sizingを指定するには、以下のような記述をCSSの初めに書いてあげましょう。

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

*はユニバーサルセレクタです。

ユニバーサルセレクタはページ全体に反映させてくれるものです。

勝手に値が決められてしまうmarginとpaddingも一度ゼロにしています。

これをテンプレートとして、毎回最初にこのように書くとよいでしょう。



最後にもう一度、同じ画像を使って、今回説明したことをおさらいしましょう。


widthとheightで指定した赤枠の数字が、中身の要素に対してなのか、外側に対してなのか、この違いということです。


最後までご覧いただきありがとうございました。

今後もプログラミングに関する項目をわかりやすく解説していきます。

QooQ

TOP