それでは、解説に入っていきたいと思います。そのまえに、今回は、この蛍光ペンの色を使って分かりやすく説明します。頑張ります。宜しくお願いいたします。
紫の蛍光ペン使います。超初級編です。
何回か前の記事でフッターの話をしましたが、その延長の話になります。以前紹介しました方のサイトに書いている事が、いまいち理解しにくいという方のためのものです。後７手詰めというところで終わる将棋実況解説ではなく、最後の詰みまでの解説です。
マージンとかパディングという用語は専門用語になり分かりにくいと思いますが、その意味が漠然と分かるくらいでも出来るということです。
図を見ていただくと、全幅が1404pxになっています。フッターの幅を990pxにすると、余白0ということです。余白が左右に8.3333%ある状態がデフォルトみたいです。
これを例えば、4%にしたいとか、2%にしたいとか、0%にしたいと考えたときにどうするかということです。2%で解説します。
.site-footer {
float: left;
margin: 0 0 0 35.2941%;
padding: 0;
width: 58.8235%;
上の状態は、初期の状態のものです。フッターの幅は825px。
マージンの数字は、上右下左を表していますので、一番左側からフッターの左側までが全体幅の35.2941%という事です。
一番左から、フッターの左側までということですから左右2%にした場合、もともとの図を見ながら考えると、左右2%にするには。はい比で解きましょうか。100:990=96:X X=950左右2%の場合、990-950=40 よって左右20pxずつ余白が出来る状態。414+20＝434pxが一番左側からフッター左側までの距離となります。
したがって、434÷1404＝30.911 この数値が35.2941と入れ替わります。
で、次にwidthを修正。990が950になる。よってもともと825pxが950pxになる。950÷1404＝67.6638%書き換えて終了です。
同様に何％の余白でも出来るので是非やってみてください。
