パソコン画面でデザイン通りサイトを制作しても、スマホ画面時にレイアウトが崩れてしまうこと、ありませんか?

今回は、box-sizing でスマホのレイアウトデザインが崩れない方法を紹介します。

基本のコードは、以下になります。

<div class="container">
  <div class="box-1">これは、1番目のボックスです</div>
  <div class="box-2">これは、2番目のボックスです</div>
  <div class="box-3">これは、3番目のボックスです</div>
</div>
.container {
  display: flex;
}

.box-1,
.box-2,
.box-3 {
  width: 200px;
  height: 300px;
  color: white;
}
.box-1 {
  background-color: darkblue;
}
.box-2 {
  background-color: darkgreen;
}
.box-3 {
  background-color: darkred;
}

image2

3 つのボックスがあります。

1 番目のボックスにpaddingを追加してみます。

.box-1 {
  background-color: darkblue;
  padding: 30px;
}

image3

Chrome の検証で確認すると、

image4

1 番目のボックスは、paddingの分、60px 広くなっているのがわかります。

他のボックスとサイズを合わせたい場合、box-sizingで指定します。

1 番目のボックスに、box-sizing: border-box;を設定します。

.box-1 {
  background-color: darkblue;
  padding: 30px;
  box-sizing: border-box;
}

ブラウザで確認すると、

image5

1 番目のボックスが、他のボックスのサイズと同じになりました。

また、検証で確認すると、

image6

ボックスの中身が、padding のサイズである 60px 分狭くなっているのがわかります。

box-sizingborder-boxを指定すると、要素のサイズにpaddingなどの要素を含めることになります。

様々な画面に対応する時、paddingなどによってボックスのサイズが変わらないことで、思わぬデザインの崩れがなくなります。

ちなみに初期値は、box-sizing: content-box;です。

.box-1 {
  background-color: darkblue;
  padding: 30px;
  box-sizing: content-box;
}

image7

box-sizing: content-box;は、要素のサイズにpaddingなどの要素を含めません。

また、親要素のbox-sizingを引き継ぐ場合、box-sizing: inherit;を指定します。

古いブラウザを使うと、box-sizingが効かない場合があるので、-webkit-box-sizing: border-box;を設定しておきましょう。

また、ウェブサイトを制作するとき、全ての要素にbox-sizing: border-box;を指定しておくと作業が楽になります。

* {
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

ウェブサイトのデザイン崩れにお悩みの方は、ぜひ試してみてください。

ブログ一覧