現在、取り掛かっている案件はやっぱりxhtmlじゃなくてHTML5でやり始めることにした。
のはよいのだけれどしょっぱなからいろいろつまづきまくりなので備忘録を記すことにしておく。(最近特に忘れっぽいのでw)
ヘッダの記述あたりHTML宣言とか文字コードとかはDWが適切に記述してくれるので省略。そのうち暗記しちゃうでしょうw
という訳で、ひっかかったところから順番に(今回は2つ)。
marginもpaddingも0にしてあるのに画像の下側に隙間ができてしまう。これは、どうやら画像の配置が今までだとデフォルトで『vertical-align』が『bottom』だったのに対して、HTML5では『vertical-align』の初期値が『baseline』になってしまっているかららしい。という訳で。
img {vertical-align:text-bottom;}
って最初に入れておけばOK。
あと、もうひとつ。
HTML5からは<br>へのclear属性が廃止されたみたいで効かない。
今まで、floatしたあとの解除に<br style=”clear: both; margin: 0;” />(ほんとは外部CSSに書いてるよ)とかしてたんだけどこれが効かないくて悩んだ。という訳で、普通に
<div style=”clear: both;”>(ほんとは外部CSSに書いてるよ)みたいにする必要があった。
とりあえず、この2つだけで今日は2〜3時間も悩んでしまった。
まだまだいろいろ作法の違いに悩みそうだけど、それも勉強だなー。
(無駄な労力ともいう?)