まず、htmlのタグは大きく二種類に分けられます。インライン要素とブロック要素です。
| 見た目 | 代表的なタグ | 代表的な（現在利用が推奨されない）タグ | |
|---|---|---|---|
| ブロック要素 | 前後に改行が入る | p, div, h1〜h6, table, blockquote, pre, hr, from | center |
| インライン要素 | 基本的に前後に改行が入らない | a, img, span, q, br, em, strong, (普通の文章) | font, b, big, u, strike, s |
文章の中の一部分を修飾するものがインライン要素、と考えてもいいかもしれません。
で、注意してほしいのは、それぞれのタグで中に入れられるものが違うのです。まっさきに注意して欲しい三つを挙げます。
- bodyタグの直下にはブロック要素しか入れられない
- つまり普通の文章は必ずpやdivやh1やらのタグに囲まれている必要があります。
- ほとんどのブロック要素の中にはインライン要素しか入れられない
- <p><p>なんちゃら</p><p>ほんちゃら</p></p>はダメ。
- divタグはブロック要素が含まれてもOK
- <div><p>なんちゃら</p><p>ほんちゃら</p></div>は大丈夫
つまり、こういう使いかたをするのが理想です。
- 普通の地の文はpで囲む
- 幾つかのpなどをさらに大きなグループで囲みたいときにdivを使う
例えば日記ページの一日分を<div class="one_day">で囲みます。で、CSSにdiv.one_day { border: 2px #fff solid}と書けば一日分が枠に囲まれるように見えるわけです。(ここでdiv style="border: 2px #fff solid"と書けばCSSを書く必要が無くなります。が、それだとデザインとhtmlの分離がまったく出来ないのでやめましょう）
なお、divはclassやidなどでスタイル指定をしないとなんの意味もないタグです。つまりCSSの為に書くタグなので、デザインとhtmlの分離という観点からすると推奨できないタグです。だから余り多用しないほうがシンプルで読みやすいhtml,CSSを書くことが出来ます（そのかわりデザインもシンプルになりますが…)
さて、上の表にもあるとおり、fontは推奨できないタグです。何故なら近い将来htmlという規格から削除されることが決定しているからです。spanに置き変えていきましょう。（もちろんこのときにspan style="font〜"と書いては意味がありません。span class="hogehoge" としてCSSで指定しましょう。クラス名は"red"とかでなく"warning"など、意味のある単語のがより素敵です。）同様にcenterも削除される予定になっています。divに置きかえてスタイルシートでtext-alignとか使いましょう。
以上、ざっとですが。
注：以下の条件に当てはまるコメントは無視されます
- 「http:」を含むもの
- 日本語を含まないもの(半角文字しかないコメント)
書いた日: 2006/12/14 17:04 カテゴリ:topic » html