大阪・兵庫・京都・奈良のホームページ制作、ECサイト制作、ランディングページ制作、WEB集客なら安心の「リエイト」へ

06-7662-8688
定休日 土日祝
受付時間 10時〜18時

homepage

ホームページ制作

ホームページ制作2017.08.29

paddingやmarginの計算から解放される!box-sizing:border-box;

img

floatしていたボックスのカラム落ち、揃えたいはずの要素の微妙なサイズのズレ…。
特にHTML/CSSによるホームページ制作をはじめたばかりの方にとっては、よくあるコーディングの悩みなのではないかと思います。
しかし、HTML/CSSも長い時間をかけて改善が進みつつあり、少しでもコーディングを行う人の負担を減らすべく、さまざまな工夫が施されつつあります。
今回ご紹介させていただくbox-sizing:border-box;も、そんな工夫のひとつになります。

これまでホームページ制作者を困らせてきたborderやpaddingの仕組み

たとえば、以下のようなコードがあったとしましょう。

width:800px;
padding:20px;
border:1px solid #000000;

幅を800px、パディングを上下左右に20px確保し、さらに1pxのボーダーで囲むという処理を行っています。
このような記述をしている場合、一見すると幅は800pxなのですが、実際には、この要素の幅は842pxという形で処理されてしまいます。

これは、これまでのHTML/CSSの非常に面倒なポイントで、paddingやborderを指定すると、その指定した分だけ要素のサイズを増やすという仕様のためです。
すなわち、今回の例の場合、以下のような計算になります。

要素の幅 = width指定値800px + padding左20px + padding右20px + border左1px + border右1px = 842px

こうした仕様を知らずに、幅800pxのボックスを作ろうとしてコーディングをしてしまうと、思わぬサイズ感のズレやカラム落ちを招く結果となります。
HTML/CSSの仕様に沿って、厳密に800pxのボックスを作りたい場合は、以下のような記述をする必要があります。

width:758px;
padding:20px;
border:1px solid #000000;

本来確保したい800pxの幅から、パディングとボーダーのサイズをあらかじめ幅の指定から差し引いておくわけですね。

この方法で、なんとか幅800pxのボックスの作成は実現できるわけですが、この書き方では、paddingやborderの値をいじるたびに、widthの値もいじらないといけないという問題も含んでいます。
仕様を理解して記述していたとしても、それなりに面倒なコーディング作業が発生してしまうというわけですね。

borderやpaddingの解釈を根本的に変えてくれるbox-sizing:border-box;

上記の仕様は、HTML/CSSが定義されてからCSS3が発表されるまでの間、脈々と続いてはホームページ制作者を困らせてきた罪深い仕様です。
まず、仕様を理解させる段階で困らせますし、仕様を理解できたとしても、その後のコーディングの効率に影響を与えてしまうのです。
こんな罪深い仕様を、ホームページ制作でHTML/CSSに携わる人々はカルマのように永久に背負い続けなければならないと思われていたのですが、そんな絶望的な状況に一筋の光を差してくれたのが、今回紹介させていただく、box-sizing:border-box;です。

border-boxのCSSプロパティは、デフォルトはcontent-boxとして設定されていますが、これをCSSでborder-boxと指定しなおすことで、パディングとボーダーの指定を幅や高さに含めないように指定することができます。
つまり、幅800pxのボックスを作りたいときは、以下のような記述をすれば良いわけですね。

box-sizing:border-box;
width:800px;
padding:20px;
border:1px solid #000000;

こうしておくことで、パディングやボーダーの幅がどんなものであろうが、幅800pxのボックスを維持することができます。
ホームページ制作の際には、パディングやボーダーを微調整することで見た目の整形を行うことが想像以上に多いもので、パディングやボーダーを調整するたびにいちいち幅を計算して設定しなおす手間が減るのは非常にありがたいことです。

CSS初期化の際に一行足すだけでコーディングが非常にラクになります。

このbox-sizing:border-box;というCSSの記述、仕様を覚えてしまえば非常に扱いやすい記述となります。
とはいえ、上記の例のように、ひとつひとつの要素にいちいち記述をしていくのは面倒なものです。

そこでひとつご提案させていただきたいのが以下の手法。

私たちは、ブラウザがもともと各要素に持たせているマージンやパディングを初期化するために、以下のような記述をして、意図しない空白が発生するのを防ぐという知恵を持っていました。

* {
margin:0;
padding:0;
}

これは、ワイルドカード(*)を利用することで、すべての要素のマージンとパディングをゼロにするという記述です。
この記述をCSSの最初にしておくだけで、その後のCSSコーディングの効率を飛躍的に高めることができます。
ここに、今回のbox-sizing:border-box;も追加することをおすすめいたします。

* {
margin:0;
padding:0;
box-sizing:border-box;
}

これだけで、あなたはこれまでご説明させていただいたパディングやボーダーによる幅の変動という悩みから解放されるわけですね。

ただ、一点注意すべきは、すでにある程度完成したホームページにおいてこの記述をすべての要素に適用させてしまうと、それはそれで思わぬ表示崩れを起こします。
あくまでこれから新規に作成する際のTipsとして割り切り、既に作成されているホームページに関しては、適用したい要素に逐一記述していく形の方が無難でしょう。

リエイト情報

株式会社リエイトでは、累計500件以上のホームページを制作してきた実績と信頼で
企業様のパートナーとして、課題を一緒に解決していきたいと思います。
ホームページのことで分からないことがあればリエイトへお気軽にご相談ください。
担当が丁寧に対応致します。

ディレクター担当:後藤 涼也
_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/
『ホームページを優秀な営業マンに育てましょう!』
株式会社リエイト 総合窓口
〒556-0011 大阪市浪速区難波中2-10-70 なんばパークスタワー 19階
TEL: 06-7662-8688 FAX: 06-7662-8701
Email: info@re-eight.com
_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/

関連記事

RELATED ARICLE

img