16.3.3. 箇条書き
HTML 文書内で箇条書きをする方法を説明します。HTML では、順不同リスト、順序つきリスト、定義リストの 3 種類の箇条書き構造が用意されています。順番に見て行きましょう。
順不同リスト (unordered list) #
順不同リスト (unordered list) は、項目の順序に意味のない箇条書きです。たとえば次のようなものは順不同リストです。
ソース
- 音楽鑑賞
- 映画鑑賞
- 絵画鑑賞
- 読書
- 音楽鑑賞
- 映画鑑賞
- 絵画鑑賞
- 読書
このように順不同リストは ul 要素で表し、箇条書きの各項目は li 要素で表します。li 要素の中には単なる単語だけではなく、段落や引用などの文書構造を入れることができます。
箇条書きの各項目の先頭には黒丸などが表示されていると思いますが、この見出しの記号は CSS を用いると変更することができます。
順序付きリスト (ordered list) #
順序つきリストは項目の順序に意味のある箇条書きです。たとえば 16.2. ウェブサイトの解説 の冒頭に書いた箇条書きが順序つきリストです。
ソース
- 情報発信用 WWW サーバの利用登録
- アップロードするウェブサイトの用意
- ウェブサーバへのファイルのアップロード
- 情報発信用 WWW サーバの利用登録
- アップロードするウェブサイトの用意
- ウェブサーバへのファイルのアップロード
順序付きリストを表すには ol 要素を使います。箇条書きの項目を表すのに li 要素を使う点は順不同リストと同じです。また順不同リストと同様、CSS を使うとリストの番号付けに使う文字を変更することができます。
定義リスト (definition list) #
定義リスト (definition list) とは、用語とその説明の対のリストです。たとえば次のように使います。
ソース
- 順不同リスト (ul 要素)
- 項目の順序がそれほど意味のない箇条書き。項目は li 要素で表す。
- 順序つきリスト (ol 要素)
- 項目の順序に意味のある箇条書き。項目に番号を付けて表示される。項目は li 要素で表す。
- 定義リスト (dl 要素)
- 用語とその説明の対のリスト。用語は dt 要素、説明は dd 要素で表す。
順不同リスト (ul 要素): 項目の順序がそれほど意味のない箇条書き。項目は li 要素で表す。
順序つきリスト (ol 要素): 項目の順序に意味のある箇条書き。項目に番号を付けて表示される。項目は li 要素で表す。
定義リスト (dl 要素): 用語とその説明の対のリスト。用語は dt 要素、説明は dd 要素で表す。
このように定義リストは dl 要素で表します。用語は dt 要素で、説明は dd 要素でそれぞれ表します。dt 要素と dd 要素は、dl 要素の内部にしか出てくることのない要素です。