HTMLの基本
リストを的確に使おう
項目の一覧（リスト）を表す要素として、順不同リスト (ul)、順序リスト (ol)、定義リスト (dl) の３種類が定義されています。
ul (Unordered List) 要素は、個々の項目の順序が意味を持たないリストを作成するときに使います。
ol (Ordered List) 要素は、個々の項目の順序に意味があるリストを作成する時に使います。
dl (Definition List) 要素は、「用語」 とその 「解説」 など、対になって表現されるものを表すに使われます。
ここでは特に ul 要素と ol 要素の使い方に注目します。dl 要素の使い方については、「定義リストを表のように見せる」 を参照してください。
ページトップへ
リスト項目を示す li 要素は、ブロックレベル要素とインライン要素を内容とすることが可能なため、li 要素内に ul 要素やol 要素を置いてリストを入れ子にすることができます。ただし、ul
要素、ol 要素の内容は li 要素に限られ、更に li 要素は ul 要素、ol 要素の子要素としてしか記述できません。
リスト入れ子記述例
- ＸHTMLソース記述（間違った例）： ul 要素①は ul 要素②を子要素としてもつことはできない。
- <h3>同梱の付属品</h3>
- <ul> ←①
- <li>リモコン</li>
- <li><li>取り扱い説明書</li>
- <ul> ←②
- <li>初めにお読みください</li>
- <li>設定マニュアル</li>
- <li>ユーザーマニュアル</li>
- </ul>
- <li>電源アダプタ</li>
- </ul>
- ＸHTMLソース記述（間違った例）： li 要素④は li 要素③の子要素として記述できない。
- <h3>同梱の付属品</h3>
- <ul>
- <li>リモコン</li>
- <li>取り扱い説明書 ←③
- <li>初めにお読みください</li> ←④
- <li>設定マニュアル</li> ←④
- <li>ユーザーマニュアル</li> ←④
- </li>
- <li>電源アダプタ</li>
- </ul>
- ＸHTMLソース記述（正しい例）：
- <h3>同梱の付属品</h3>
- <ul>
- <li>リモコン</li>
- <li>取り扱い説明書
- <ul>
- <li>初めにお読みください</li>
- <li>設定マニュアル</li>
- <li>ユーザーマニュアル</li>
- </ul>
- </li>
- <li>電源アダプタ</li>
- </ul>
ページトップへ