【CSS】超便利なbox-sizingとは?表示崩れとさようなら

こんにちは!ラクです。

この記事では、表示崩れを防いでくれる便利なプロパティ「box-sizing」について解説していきます!

この記事を読むと、「box-sizing」の使い方がわかります。

box-sizingの使い方

box-sizingの書き方は以下の通りです。

div {
  box-sizing: 値 ;
}

値には、この2種類があります。

  • content-box(初期値) ←paddingとborderを高さと横幅に含めない。
  • border-box ←paddingとborderを高さと横幅に含める。
  • inherit ←親要素に合わせる。

box-sizingとは?

書き方もわかった所で、box-sizingとは何なのか、解説していきます!

では、まず「content-box」と「border-box」の違いについてサンプルを作ったので見て下さい。

<div class="box1"><p>content-box</p></div>
<div class="box2"><p>border-box</p></div>
.box1 {
  box-sizing: content-box;
  border: 10px solid black;
}

.box2 {
  box-sizing: border-box;
  border: 10px solid black;
}

縦80px 横200px のboxを2つ作って、それぞれに「content-box」と「border-box」を設定して、10pxを枠線をつけました。

すると、content-boxの方では、グレーの部分が縦80px 横200pxのboxで、各辺に10pxずつ線が足されているのが分かります。

一方、border-boxの方では、グレーの部分と各辺の10pxの線を合わせて縦80px 横200pxのboxとなっていることが分かります。

これが、「content-box」と「border-box」の違いです!

box-sizingが役立つ時

最後に、「box-sizing」を使うととても役に立つ場面を紹介して、この記事を終わります。

役立つ場面は、「楕円形の要素に枠線を付ける時」です!

先ほどと同じように、サンプルを作りました。

.box1 {
  box-sizing: content-box;
  border: 10px solid black;
  border-radius: 40px;
}

.box2 {
  box-sizing: border-box;
  border: 10px solid black;
  border-radius: 40px;
}

boxの縦が80pxなので、その半分の40px丸めました。

box-sizingを使うと、border-radiusを伴った外枠の追加がとても簡単になります!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です