cssは妄想で理解してまえ！

cssでは
①floatの理解
②marginとpaddingの理解
でつまずく初心者が多いという話を聞きました。

私はそれぞれをお得意の妄想にあてはめて理解しました。
floatとcleafixのかけどころをいつも間違うので、
floatには親要素にwidth幅を指定しないといけない、ついでに親要素にfloatかけてしまいがちだったんですが、

①まず土俵の位置とサイズを決める
②力士にfloatで立ち位置を指示していく
③行司(cleafix)に来てもらって、次々土俵に登ろうとしてくる力士にストップをかける

floatかけるのがliが多かったせいかなぜか力士設定です。
でもイメージが強烈なので間違いはだいぶ少なくなりました。

marginとpaddingの理解ですが、魔法少女で理解しました。
background　urlで画像をひっぱってきてテキストに下線引いたり、テキストとアイコン表示させたりするときに、
「スキマあけたい。。。paddingを～」ってやってるその頭の中では

魔法少女(テキスト)が呪文urlを使って幻獣(img)を召喚しています。
そのままでは幻獣は魔法少女にべったり全身に貼り着いています。
サイズと位置を指定して肩に乗るくらいのサイズに変化させます。
でも頭の上にべったりいます。うざい。
「も～～幻獣(img)！！えーーいpadding！！」
と唱えると指定したちょうどいい位置に幻獣(img)が来てくれるわけですね～～。

「これが・・・私(css)のチカラ・・・！！」

何を言っているんだ。

でも把握できてきているからいいんです。

あんな半角英数字だけじゃ理解するのは難しいです。
「idが#で、classが.が混在してる人がいるみたいだけど～」という先生の言葉にも当てはまりませんでした。一発で覚えました。
IDカードは□で、クラスバッチは●ですよ！！
IDは一度しか使えないのは教師だから！先生は一人ずつだから！
classが同じのが何度も使えるのはモブだから！

何を言っているんだ（２度目）

いいんです。
理解できればいいんです。

楽しく授業を理解する工夫は大切ですよね☆