paddingやborderを付けた時の要素幅指定について
paddingとかborderって意外と厄介ですよね。
例えば横幅500pxのボックスを用意します。
そこにpadding:50px;とborder:5px solid #000;を付けるとこうなります。
500pxのボックスが欲しいのに、paddingやらborderやらをつけるとどんどん大きくなってしまいます・・・
なので全部の値を足し引きして横幅を決めなければなりません・・・
この場合であれば「width:390px;」にしなければなりませんね。
このまま余白が変わらなければいいですが、調整が入ったり、レイアウトを変更しようとした時にとても面倒です。
こういうものだ・・・と受け入れればいいのかもしれませんが、数値が13pxとか細かい値が来ると厄介です。
またborderも1pxとか2pxをよく使うので、指定する数値もキリが悪く、計算が大変です。
そこで活躍するのが「box-sizing」
指定できる値はこちらです。
content-box：padding と border の幅を要素の幅と高さに含めない.（デフォルト）
border-box：padding と border の幅を要素の幅と高さに含める
どゆこと？と思うので簡単に説明すると、「box-sizing:border-box;」と指定してあげれば、横幅500pxで指定した中にpaddingもborderも含んで計算しますよ。ということです。
もうpaddingとborderの幅を加味して横幅を指定する必要はありません！メンテナンスがとっても簡単になりますね。
先ほどの例にbox-sizing:border-box;を付け加えるとこうなります。
おお！！なにやら良さそうな感じです！！
煩わしかった計算が減り、直感的に考えられるようになりました。
ですが、とても便利だから早速全部に付けてしまえ！！！
というのは危険です・・・
既にできているコンテンツに付け加える事によって、思わぬ調整箇所が出てきてしまうので、注意してください。
box-sizing:border-box;を使う事で、ボックスの幅全体を考えやすくなりました。
その反面、文字や写真を入れられる幅は今まで以上にわかりにくくなってしまいます。
何が起こるかというと、写真の横幅を何pxにしたら綺麗に収まるのか？とか12pxの文字が何文字まで収まるのか？といった配置するコンテンツ量は今までと同じように計算して出さなければなりません。
Webなので文字は折り返されるもの。という認識は広くありますが、一行に収める文字をしっかりと決めたいレイアウトの場合は大変ですね。
この辺りはエディトリアルデザインを長くしている方には抵抗があるかもしれません。
ページ全体的な見栄えや、更新作業を考慮するととても便利な「box-sizing」・・・でも優れた点ばかりではありませんね。
長所もあれば短所もあります。便利に使える場面もあれば不便に思う事もあるものです。
利用する場面に合わせて使うようにしましょう。
まとめ
・box-sizing:border-box;を指定すると、ボックス幅にpaddingとborderの幅を含めてくれる
・ボックスの全体幅は変わらないので、中に入れるコンテンツ幅は計算しなければならない
