« Haute Secure | トップページ | XMLを勉強する »

2008/03/10

Study HTML 4

今回はリストについてです。

□並列列挙リスト:ul(Unordered List)要素を用いる。それぞれの項目にはli(List Item)要素を用いる(以後のリストでも同じ)。例えば、

<ul>
<li>項目1</li>
<li>項目2</li>
</ul>

とすると、次のように表示されます。

  • 項目1
  • 項目2

□順序付きリスト:ol(Ordered List)要素を用いる。例えば、

<ol>
<li>項目1</li>
<li>項目2</li>
</ol>

とすると、次のように表示されます。

  1. 項目1
  2. 項目2

□定義型リスト:dl要素を用いる。用語にはdt要素、その説明にはdd要素を用いる。

<dl>
<dt>項目1</dt>
  <dd>項目1です</dd>
<dt>項目2</dt>
  <dd>項目2です</dd>
</dl>

とすると、

項目1
項目1です
項目2
項目2です

このように表示されます。以下にこれらのリストの注意点を書きます。

olul要素内に記述できる要素はli要素に限られ、逆にli要素はolulの子要素としてしか記述できません。(body要素の直接の子要素としてliを記述してはいけない)

li要素の内容には、テキストやインライン要素を記述でき、また段落などのブロックレベル要素も含むこともできます。

dl要素内に記述できるのは、dt要素もしくはdd要素のみ。したがって、dl要素の直接の子要素としてもう一つdl要素を記述してはいけません。

dt要素の内容はインライン要素のみですが、dd要素はインライン要素、ブロックレベル要素のどちらも内容とすることができます。

また、リストは入れ子にすることもできます。

  • 項目1
    • Item1
    • Item2
  • 項目2

これは次のように単純に記述すればいいだけです。

<ul>
<li>項目1</li>
  <ul>
   <li>Item1</li>
   <li>Item2</li>
  </ul>
<li>項目2</li>
</ul>

さらに、HTML4ではdt要素、dd要素は一つずつ交互に使用する必要はないので、複雑な定義型リストをつくることもできます。

<dl>
<dt>項目1</dt>
<dt>Item1</dt>
  <dd>項目1です。</dd>
<dt>項目2</dt>
  <dd>項目2です。</dd>
  <dd>This is Item2.</dd>
</dl>

これは、このように表示されます。

項目1
Item1
項目1です。
項目2
項目2です。
This is Item2.

リストに関しては以上です。

|

« Haute Secure | トップページ | XMLを勉強する »

HTML/CSS」カテゴリの記事

コメント

この記事へのコメントは終了しました。

トラックバック


この記事へのトラックバック一覧です: Study HTML 4:

« Haute Secure | トップページ | XMLを勉強する »