-
点で箇条書きにする<UL>(UnorderedList)
内容を箇条書きにした方が良いものは、リスト表示するタグ<UL>〜</UL>と<LI>〜(</LI>)を用いる。<UL>〜</UL>がリスト構造の範囲を示し、<LI>〜(</LI>)がリスト内の各項目の区切りになる。
一見このタグを用いずとも同じ表示が出来そうに思えるが、各項目が長くなった場合にその意味が出てくる。
点が項目毎に打たれるが、項目毎の２行目以降においてインデントが点の下に来ないのが判る。これをリストタグを用いずに表現しようとすると、以下の様になってしまう。
単に文字で"・"を置いても、そこで改行を入れたとしてもインデントはされない。箇条書きにすべきものにはそれ相応のタグを用いるべきである。
また、これをネストした場合は、以下の様になる。
-
番号付きのリストにする<OL>(OrderedList)
項目毎に番号を付与したい場合に用いるのが、<OL>〜</OL>である。これを用いると、項目毎に番号が付く 。
番号リストのサンプルです。
<OL>
<LI>項目１です。</LI>
<LI>項目２です。</LI>
<LI>項目３です。</LI>
</OL>
以上です
表示はこうなる。
番号は自動的に付与されるので、項目を追加してもそれが何番かは全く意識する必要は無いのが便利な所である。
また、 これも<UL>と同じくネストが可能である。
表示はこうなる。
番号付きと番号無しは組み合わせが可能で、適宜、設定すると良い。
表示はこうなる。
-
定義リスト<DL>（DefinitionLisst）
何か単語とその説明という組み合わせのリストを作りたい場合に用いるのが<DL>〜</DL>，<DT>〜（</DT>）(DefinitionTerm)，<DD>〜（</DD>）(DefinitionDescription)である。<DL>〜</DL>がリスト全体を指し、その中に<DT>〜（</DT>）で定義したい言葉を置き、その説明を<DD>〜（</DD>）に置く。
<DL>
<DT>説明する単語１</DT>
<DD>意味その１</DD>
<DT>説明する単語２</DT>
<DD>意味その２</DD>
<DT>説明する単語</DT>
<DD>意味その３</DD>
</DL>
表示はこうなる。
これも<OL>や<UL>と同じく、多くのブラウザではインデントが説明に対しなされる。
表示はこうなる。
これも前項で述べた通り、<DT>〜（</DT>)内に<HR>を入れるとその属する要素で大きさが変わり、インデントが設定される。
表示はこうなる。
-
リストのタグに関する注意点
リスト要素を作るタグは以上だが、タグの規則に従わないとバグの元になる。
- タグの入れ子の規則に従うこと。
リスト内の項目となる<LI>〜(</LI>)，<DT>〜(</DT>)，<DD>〜(</DD>)はそれぞれ、その親の要素となる<UL>，<OL>，<DL>の中に置かなければならない。ブラウザによっては勝手に解釈して表示してくれる（つまりバグを補う）場合も有るが、それは仕様的に盛り込まれているものでは無く補助的手段でしかない。
表示はこうなる。一応表示されるが保証の限りでは無い。
バグを救ってくれる機能もブラウザでまちまちで、バージョンUPすると厳しくなったりという場合もあり、全くあてにならないので注意すること。
- 構造的な隙間には何も入れるべきではない。
各要素でタグが分かれているので、<LI>〜</LI>
と次の<LI>〜</LI>など、要素間に隙間があり、そこに何か入れると扱い方が定義されておらず、バグとなる。
表示はこうなる。一応表示されるが保証の限りでは無い。このパターンの場合は、IE5.5とNetscape6で違うレンダリングがなされる。
これを回避するには、手っ取り早いのが終了タグを取り去ることである。 </LI></DT></DD>は、それぞれ省略可能として定義されている。
<LI>を例にとると、入れてはいけない部分はリストの<LI>〜</LI>と<LI>〜</LI>の間、即ち前の項目の</LI>と次の項目の<LI>の間で、</LI>を省略すれば、その隙間は出来ない事になる。省略可能な終了タグは、こういったミスを起こさないようにすべく省略可能なっていると覚えておこう。
それでは何故、「省略可能」というような半端な定義でなく「無し」としないのかと言えば、 要素はタグで囲むものという概念がある故で、明示的に終了を記した方が後で管理が楽になる側面もあるからだ。この辺は仕様上どちらでも可なので、自分で省略するか否か決めるようにしよう。部分的にまちまちというのは困る元なので、きっぱり決めよう。
|
