【css】marginのパラメータを絵的に覚える【又はpadding】

☆marginのパラメータって

4種類あるけれど、どれがどこだっけ？って思うわけで。(paddingも同様)

/*パラメータ1個指定は"上下左右"*/
margin 1px;
/*パラメータ2個指定は"上下、左右"*/
margin 1px 1px;
/*パラメータ3個指定は"上、左右、下"*/
margin 1px 1px 1px;
/*パラメータ4個指定は"上、右、下、左"*/
margin 1px 1px 1px 1px;

特に2個と3個が覚えにくい。

☆それでは絵的に覚えてみようかなと

覚えやすそうなパラメータ個数 4→1→2→3 の順で絵を考えてみました。

○パラメータ 4個

/*パラメータ4個指定は"上、右、下、"左*/
margin 1px 1px 1px 1px;

上から右回りで、パラメータが4個なんですよね…。

そう！四国八十八ヶ所巡りも右回りなので、"TOPから右回り！"って覚えると良いと思うんですよね！

○パラメータ 1個

/*パラメータ1個指定は"上下左右"*/
margin 1px;

1個なので、全指定ですね。

○パラメータ 2個

/*パラメータ2個指定は"上下、左右"*/
margin 1px 1px;

これは難しい！2ですが

２って、崩すと「み」っぽくないでしょうか？袈裟切り→横薙ぎみたいな、孤を描いて横薙ぎへ移行する勢いを感じさせます。

○パラメータ 3個

/*パラメータ3個指定は"上、左右、下"*/
margin 1px 1px 1px;

いよいよ最後の3です。

漢数字の３の書き順で覚えてしまいます。

ではでは。

よくわかるHTML5+CSS3の教科書

HTML+CSSデザイン|基本原則、これだけ。【HTML5 & CSS3対応版】

CSS3　スタンダード・デザインガイド

ゼロからわかる HTML&CSS超入門

CSS3 Solutions: Essential Techniques for CSS3 Developers

現場のプロから学ぶXHTML+CSS