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デザインのオンラインスクールが公開中!
以下のリンクからお申込みで、特別料金の70%OFF!

未経験からプロのWebデザイナーになる! 400レッスン以上の完全マスターコース
こちらのコースは全くの未経験の方が、プロのWebデザイナーとして働けるレベルになることを目的としたコースです。
・全422レッスン & 42時間! 通学スクール80万円相当の内容
・授業×チャレンジ課題で実践的なスキルが身につく!
・過去1100名以上のスクール卒業生を輩出した、 Webサービス運営企業・デザイナー輩出企業だからこそ作れるプログラム

Webやアプリの最新デザインツール Sketch3 |100レッスンの完全マスターコース
Sketch3未経験からプロレベルを目指す、充実したコースです。
Sketch3の単なる機能説明をするような、つまらないコースではなく、アイコン制作、ボタン作成、メインビジュアル制作、Webページの制作など、実際の制作をしながら実践力を身につけます。
1000名以上の卒業生がいる実績ある日本のWebデザインスクールが提供しています。


NESTonlineBlog編集部

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

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