HTML+CSSの研修に行ってきました

基本的な文法とレイアウトを作るときの考え方を学んできました。
ブラウザ戦争の話とか、ちょっとした余談も面白かったな。

わたしがポイントと思ったのは、基本中の基本だけど、

ブロック要素とインライン要素の区別
これはブロック、これはインラインってあんまり意識してなかったけど、これあやふやにしてると後から辛いぞって。
ブラウザで100％広がるのがブロックで、広がらないのがインラインという分かりやすい違いを教わりました。
本当は見た目と文書構造は分けて考えるべきなので、見た目の特徴でブロックとインラインを区別するのはおかしいんだけど、
初心者には分かりやすい。

margin
marginって思うように反映されないときあるじゃないですか。(わたしはある)
2個続いているボックスにborderやpaddingが存在しない場合、上のボックスのmargin-bottomと下のボックスのmargin-topの
大きい方しか評価されないからなんだけど、なんてややこしいんや。
で、講師の方はmargin-bottomしか使わないと言ってました。だいたいみんなそうでしょ？って。
初めて知りましたわー。

line-height
これはノートの罫線みたいなもので、日本語だとだいたいフォントサイズに1.5かけるとちょうど良いみたい。

float
floatの使い方初めてちゃんと分かりました。
使いづらいと思ってたけど、ちゃんと分かればちゃんと使えるね。
floatはテキストがない場合、高さがないものとみなされてしまう。ややこしいけど、そうゆうものだからしょうがない。
clear: both; を使うと回り込みをしなくなる。overflow: hidden; を使うと高さを算出する。
どっち使っても同じように見えるけど、背景画像があるときははっきり違う。
clear: both; は回り込みをさせなくするだけなので、テキストがあるところまでしか高さがないのです。
背景画像がある場合はoverflow: hidden; を使わないと、変になってしまうのでした。

基本的なこと分かってなさ過ぎたので超良かった。
CSSのレイアウトはもうちょっと練習しないとアレだけどアレだ。

つづくー。