5

paddingやborderはもう書かない!?超便利なbox-sizingの使い方


ブロックレベル要素(h1~6、Pやdivなど)をCSSで作っているとき、
ボーダー(border)で囲ったり、余白(padding)を設定していると
よくつまずくのは「幅が思い通りにいかない!」ことです。

ピクセル単位で設計図通りに指定しているのに、どうしてもはみ出してしまう、
揃わないと悩んだ方が多いことでしょう。

ブロックレベル要素を理解する

さて、とても便利なCSSをご紹介する前に、これまで使ってきたCSSについても
きちんと理解しておきましょう。

例えば、width(幅)220pxのボックスサイズを作ろうとしたとします。

ボックスサイズの初期設定

余白がないと本文が読みにくくなるので余白(padding)を追加したり、
囲み線の幅(border)を広くした場合、それらの幅も計算に入れます。
そのため、width + padding + border が実質的な幅になります。

※ここではわかりやすくするためpx単位を使用していますが、
もちろんパーセント(%)指定も使えます。

計算が簡単になるbox-sizingプロパティ

box-sizingは、CSS3で出てきたプロパティで
「ボックスサイズ(widthやheight)の指定方法」を選ぶことができます。
値には3種類あるので紹介していきます。

box-sizing: border-box;

「border-box」を指定した場合、
“paddingとborderを含めた幅”を指定できるようになります。

box-sizingのあるなし比較

つまり、今までのように”width + padding + border”を
いちいち計算しなくても、実質的なボックスサイズを
「widthで」指定できるようになります。

box-sizing:content-box;

「content-box」を指定した場合は、
デフォルトと同じ“paddingとborderを含めない幅”になります。

box-sizing: inherit;

「inherit」を指定した場合は、「親要素の値を継承する」ことになります。
例えば、親要素のボックス内に子要素ボックスを作ると、
初期設定では「親要素の値を継承しない」ので、
子要素ボックスにも改めて設定しなくてはいけません。

box-sizing: inherit;のあるなし比較

box-sizingの使い方を考える

とても便利なbox-sizingプロパティですが、ひとつひとつのブロックレベル要素に
いちいち適用するのは意外と面倒ですね。
そこで、いくつかの方法をご紹介します。

box-sizingのみ指定した専用classセレクタを用意しておく

box-sizingを適用したい、したくない箇所が混在しているのなら、
専用のclassセレクタを作って必要な要素にのみ適用するといいでしょう。
例えば、CSSファイルに

というCSSをひとつ作成しておき、HTMLファイルの必要な要素にだけ
「class=”boxsizing”」として適用させるといった具合です。

CSSでブロックレベル要素全てに適用する

全てのブロックレベル要素にbox-sizingを適用させたい場合は、
あらかじめCCSファイルの最初の方に下記を記述しておきます。

こうすることで、いちいち指定する必要はなくなりますね。

注意:ベンダープレフィックス(-webkit-、-moz-、-o-、-ms-などを冒頭につける)を
つけていますが、古いAndroidバージョン等も考慮したため入れています。
最新バージョンのブラウザーの場合は不要ですが、旧バージョンを考慮しています。

ユニバーサルセレクタで適用する

ユニバーサルセレクタとは「全ての要素に適用する」ということで、
セレクタに「*」を使います。

ブロックレベル、インラインレベル関係なく全てに適用しても
今の段階では特に問題はないと考えられます。

まとめ

もうひとつ、box-sizingには「padding-box」という値もあります。
“幅の指定に余白(padding)のみ含めた幅”になるのですが、
まだ現段階ではFirefoxのみ表示可能なため解説から外しました。

box-sizingプロパティは、InternetExplorer7(以降IE7)以前は対応していません。
どうしても対応が必要な場合には、box-sizingを使わない形のCSSも
用意する必要があるかもしれませんが、実際のところIE7で閲覧している方は
全体の1%以下ですのでよほどのことがない限り
視野に入れなくてもいいかもしれませんね。

また、Androidの古いバージョンの場合にはベンダープレフィックスを
適用したCSSも記述しておくと安心です。

計算が簡単に、楽になるこの「box-sizing」、どんどん使って効率的なWebデザインを
目指してくださいね!

本サイトが運営するWebデザインのオンラインスクールが公開中! まずは無料トライアル!

NESTonline - テクノロジーとクリエイティブのプロを目指す人のためのオンラインスクール (詳細はこちら)-
好きなときに、好きな場所で、好きなだけ学べる。テクノロジーとクリエイティブのプロを目指す人のためのオンラインスクールを運営しています。
PhotoshopやCSS、実践的なWebグラフィックデザインなど、500レッスン以上の数十万円相当のプロを目指すカリキュラムが、月々2,500円でいつでもどこでも学べます。

Photoshopを動画でしっかり学ぶ


NESTonlineBlog編集部

NESTonlineBlog編集部です。ご寄稿頂いた記事などを公開していきます。

Next ArticleEmmet初心者のためのコードの書き方講座