2012/03/17改訂

●マークアップについて

*要するに文書の構造部分に対してのみHTMLを使用する。文書構造を表すものではない大きさや色などはHTML内に記述せず、CSSとして切り離す。

「構造」はHTML、「見た目」はCSS
 マークアップ用途
HTML論理構造的意味付け
CSS物理視覚的表現

●ブロックレベル要素とインライン要素

インライン要素は単独で記述せず、ブロックレベル要素の中に記述する。※body直下に記述しないこと!
よって、要素を指定せずにテキストを書くのも誤り。

ブロックレベル要素divh1〜h6, p, pre, address, blockquote, hr, table, form, ul, ol, li, dl, dt, dd基本的に横並びにならない要素
前後が改行して表示される
幅や高さ、マージンを指定できる
インライン要素spana, br, em, strong, img, iframe, input, textarea, mapつねにブロック要素に含まれる要素
前後が改行されずに表示される
幅や高さを指定できない(画像をのぞく)
body要素 > ブロックレベル要素 > インライン要素

●行揃えの注意

text-alignでは、横幅の指定されたブロック要素自身の水平位置を指定できない。IEで反映されるのはバグであり、本来誤用である。

ちなみに横幅の指定がなければそれは100%ということで、全横幅に対しての水平位置指定はtext-alignだけで可能。

●マージンの法則

上下に隣接するブロックレベル要素のマージンは、それぞれが個別に余白として確保されるわけではない。いずれか一方の大きいほうだけが有効になる。

上下のマージンがともに正の値の場合
→大きいほうの値に相殺される
上ボックスの下マージン15px+下ボックスの上マージン10px
→15px
上下のマージンが正の値と負の値の場合
→正の値から負の値を引いた値になる
上ボックスの下マージン-5px+下ボックスの上マージン10px
→5px
上下のマージンがともに負の値の場合
→負の値が加算されて要素が重なる
上ボックスの下マージン-5px+下ボックスの上マージン-5px
→-10px

●CSSでは指定できない要素

テーブルのセルの区切り(cellspacing)
代用策→セルに対してborder: 2px solid #ffffff;

●その他

em→通常の度合いで強調、strong→より強い度合いで強調
よってstrongの多様は禁物。
単に見た目を太字で表示したいならば、cssでfont-weight: bold;を指定すること。