読者です 読者をやめる 読者になる 読者になる

Webサイト専門プログラマの言いたい放題

元システムエンジニアがサイト制作とプログラミングについて好き放題しゃべります。

【CSS3のbox-sizingで余白計算の煩わしさから解放される方法】

f:id:wp-lesson:20150825090750j:plain

こんな経験ありませんか?

960pxのコンテナにCSSで余白を調整するために左右10pxずつpaddingを設定したら、枠をはみ出して横スクロールバーが表示されてしまった。そんな経験ありませんか?

お勧めできない方法

横幅が左右10pxずつ(合計20px)広がってしまうので、コンテナを940pxに変更するのはお勧めできません。

計算上は正しいのですが、余白を調整するたびにコンテナのwidthを計算し直すのは大変ですよね?

お勧めの方法

全てのHTMLタグに対して、CSS3のbox-sizingをあらかじめ割り当てておきます。

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

こうすれば、内側の余白(padding)をどのように変更しても、コンテナのサイズは960pxのまま影響を受けません。簡単ですね。

ちなみに、* は「全称セレクタ」といい、全てのHTMLタグを指し示すワイルドカードのようなものです。

なぜbox-sizingで解決するのか?

デフォルトでは、widthとheightにpaddingとborderの大きさを足した合計がボックスのサイズとなります。だから、paddingやborderを付けるとその分だけボックスのサイズが大きくなり、枠からはみ出してしまいます。

box-sizingを使うと、widthとheightだけでボックスのサイズが計算されるようになります。

例えばwidth:960px、padding:10px、border:1px とすると、ボックスサイズは960pxで、その内側に1pxのボーダーと10pxの余白が生まれます。
詳しくは「ボックスモデル」でグーグル検索してみてください。

CSSのレイアウトコーディングにおいて、余白の概念を正しく理解しておくことがとても大切です。