2012/03/17改訂
*要するに文書の構造部分に対してのみHTMLを使用する。文書構造を表すものではない大きさや色などはHTML内に記述せず、CSSとして切り離す。
「構造」はHTML、「見た目」はCSS
マークアップ | 用途 | |
---|---|---|
HTML | 論理 | 構造的意味付け |
CSS | 物理 | 視覚的表現 |
インライン要素は単独で記述せず、ブロックレベル要素の中に記述する。※body直下に記述しないこと!
よって、要素を指定せずにテキストを書くのも誤り。
ブロックレベル要素 | div | h1〜h6, p, pre, address, blockquote, hr, table, form, ul, ol, li, dl, dt, dd | 基本的に横並びにならない要素 前後が改行して表示される | 幅や高さ、マージンを指定できる |
---|---|---|---|---|
インライン要素 | span | a, br, em, strong, img, iframe, input, textarea, map | つねにブロック要素に含まれる要素 前後が改行されずに表示される | 幅や高さを指定できない(画像をのぞく) |
body要素 > ブロックレベル要素 > インライン要素
text-alignでは、横幅の指定されたブロック要素自身の水平位置を指定できない。IEで反映されるのはバグであり、本来誤用である。
ちなみに横幅の指定がなければそれは100%ということで、全横幅に対しての水平位置指定はtext-alignだけで可能。
上下に隣接するブロックレベル要素のマージンは、それぞれが個別に余白として確保されるわけではない。いずれか一方の大きいほうだけが有効になる。
上下のマージンがともに正の値の場合 →大きいほうの値に相殺される | 上ボックスの下マージン15px+下ボックスの上マージン10px →15px |
上下のマージンが正の値と負の値の場合 →正の値から負の値を引いた値になる | 上ボックスの下マージン-5px+下ボックスの上マージン10px →5px |
上下のマージンがともに負の値の場合 →負の値が加算されて要素が重なる | 上ボックスの下マージン-5px+下ボックスの上マージン-5px →-10px |
テーブルのセルの区切り(cellspacing)
代用策→セルに対してborder: 2px solid #ffffff;
em→通常の度合いで強調、strong→より強い度合いで強調
よってstrongの多様は禁物。
単に見た目を太字で表示したいならば、cssでfont-weight: bold;を指定すること。