†でおきしブログ†

ウナギ食べたいヽ(•̀ω•́ )ゝ✧

【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個なんですよね…。
f:id:deokisikun:20130920001922p:plain

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

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

1個なので、全指定ですね。
f:id:deokisikun:20130920002231p:plain

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

これは難しい!2ですが
f:id:deokisikun:20130920002555p:plain
2って、崩すと「み」っぽくないでしょうか?袈裟切り→横薙ぎみたいな、孤を描いて横薙ぎへ移行する勢いを感じさせます。

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

いよいよ最後の3です。
f:id:deokisikun:20130920003110p:plain
漢数字の3の書き順で覚えてしまいます。


ではでは。

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

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


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

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


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

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


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

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


CSS3 Solutions: Essential Techniques for CSS3 Developers

CSS3 Solutions: Essential Techniques for CSS3 Developers

  • 作者: Marco Casario,Nathalie Wormser,Dan Saltzman,Anselm Bradford,Jonathan Reid,Francesco Improta,Aaron Congleton
  • 出版社/メーカー: Apress
  • 発売日: 2013/01/29
  • メディア: Kindle
  • この商品を含むブログを見る

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

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

広告を非表示にする