罫線で囲む！box-sizingを理解するのに時間が掛かった

今回はアーティクル部分を罫線で囲み、余白を調整して文章を読みやすくするコーディングをしました。

 罫線で囲む

以下今回の記述内容です

/*記事*/

article {

　background-color: #ffffff;

　width: 900px;

　margin-left: auto;

　margin-right: auto;

　border: solid 1px #aaaaaa;

　padding: 30px;

　box-sizing: border-box;

　margin-bottom: 15px;

}

罫線で囲む記述は、 border: solid 1px #aaaaaa;になります。これはsolidという罫線の種類を1pxの太さで囲むという指定です。

これは理解しやすいんですが、次のpaddingからつまづき始めました。

padding

上記のようにコンテンツはpadding→border→marginの順番に囲まれています。今回指定したのは、paddingなので、paddingの値が30pxになっています。paddingだけを記述した場合、全方向に30pxの幅ができます。左右合わせると60pxとなり、上下を合わせても60pxとなります。

paddingは上下左右に方向をつけて指定することもできます。

padding-top　上

padding-bottom　下

padding-left　左

padding-right　右

今回のように方向を指定しない場合は、全方向に指定されるようになっています。

また連続して指定することも可能です。

その場合は方向の指定を省略することができます。

padding:10px 20px 25px 40px;

手前から順番に上右下左方向の指定になります。

この場合は上10px 右20px 下25px 左40pxということになります。これはpaddingだけに限ったルールではなく、marginにも適応できるルールです。

box-sizing: border-box

box-sizing: border-box;の指定は本当に理解に苦しみました。なんでそうなんの？って疑問しか湧いてこず、飲み込むのに1時間くらいかかり、なんとか理解できたかな？って感じです。

box-sizing: border-box;の指定は、width: 900px;と指定されているのに対し、どこまでで900pxにするのか決める指定です。

box-sizing: border-box;と指定すると、border-box＝ボーダー（罫線）までを含めて900pxになります。

box-sizingにはもうひとつ指定があり、content-boxという値があります。この値を指定すると、コンテンツまでを含めた横幅になります。box-sizing: border-box;よりも狭い幅を含めた指定となります。

box-sizing: border-box;を指定しないと、

コンテンツの900px+paddingの60+borderの2=962pxになります。これを指定しないとフッターとのバランスが崩れて表示されてしまいますし、面倒な計算をしなくてはいけません。計算が一気に省けて、きれいに表示できるんだから使わない手はありません。

margin-bottom:

margin-bottom: 15px;の指定は、アーティクル部分の下のmarginを15pxにするという指定です。

まとめ

今回は初めてCSS3が難しいかもって思いました。box-sizingが本当に悩みの種で、本当にこの理解で合っているんだろうか？と今でも疑問に感じています。

今までBefore/Afterを紹介するのを忘れていたので、今回から紹介していこうと思います。

Before

after

見てわかるとおり、本当にスッキリとした何の特徴もないただのペラとしたサイトです。

でも、これにはたくさんの記述が詰まっているので、1つサイトを仕上げるのは本当に大変なことなんだなって実感しています。少しずつサイトが形を成していくのは、けっこう楽しいです。

このブログに勉強したことをまとめていくのも、大きな助けになっています。

これからも勉強して、一日も早くWEBデザイナーになれるようにがんばっていこうと思います。