リスティング広告代行の専門会社|Yahoo!プロモーション広告・Google AdWords完全対応|東京・大阪・名古屋

【CSS】box-sizingにborder-boxを設定して要素のサイズをきれいに揃える


boxdim

CSSのボックスモデルでは、各ボックスは以下の要素から構成されます。

  • 内容領域(Content)
  • パディング(Padding)
  • ボーダー(Border)
  • マージン(Margin)

では、例えば以下のようにボックスのサイズを指定したとき、上記のうちどの部分がどのようなサイズに設定されるか分かりますか?

[css]
#box {
  width: 400px;
  heigth: 100px;
  padding: 10px;
  border: 5px solid #000;
  margin: 20px;
}
[/css]

正解は、こうです。

box1

このように、内容領域のサイズが400x100に設定され、そのさらに外側にパディングが10とボーダーが5取られます。つまり、直感的なボックスサイズである内容領域からボーダーまでのサイズは、合計で430x120となります

box-sizingプロパティでより直感的なサイズ指定に

このボックスに、

[css]
#box {
box-sizing: border-box;
}
[/css]

という指定を加えると、同じボックスが以下のようなサイズで描画されます。

box2

内容領域のサイズが370x70になりました。つまり、パディングとボーダーを合わせて400x100になったわけです。

このように、box-sizingプロパティをborder-boxに設定しておくと、パディングやボーダーのサイズが異なるボックスでも統一的に幅や高さを指定することが出来るので、レイアウトする際に何かと便利になります。

ただし、box-sizingプロパティは

  • IEは8以降での対応
  • Firefoxはベンダプレフィックス(-moz-)が必要

なので、使用する際はブラウザ互換に注意しましょう。



業界初のリスティング広告運用総合支援ツール Lisket(リスケット)

無料メルマガ

登録はたったの5秒!一週間分のコラムを毎週月曜にメールでお届けします。

Facebookもチェック