WordPressを使っていると、ビジュアルエディタから簡単にリストの作成ができてしまうので、HTMLでリストのタグを打ち込むときにどう書くんだっけと悩むことがあったります。
番号順のリストを作るときも面倒臭いので、普通に1、2、3と数字を行頭において、ごまかすこともあったりしましたが、じつはリストのタグにはとても便利な属性もあって、番号を降順（大きい順）に並べることもできたりします。
なので、ここでは自分自身の備忘録も兼ねてHTML5で定義されているリスト（定義リストも含む）の使い方をまとめておきます。
順不同のリストを表示する
つまり、番号が振られていない行頭が点とかのリストのことです。箇条書きと呼ばれることもあります。
- りんご
- バナナ
- みかん
- いちご
HTMLコードではこうなります。
階層構造でリスト表示する
上記は単純な箇条書きでしたが、リストの中にさらにリストを表示したい場合は、ちょっとややこしいです。
たとえば、下記のようなケースです。
- トヨタの自動車
- クラウン
- プリウス
- ホンダの自動車
- アコード
- フィット
HTMLでは下記のような記述になります。
序列リストを表示する
今度は、頭に番号がついたリストです。
-
- りんご
- バナナ
- みかん
- いちご
HTMLコードではこうなります。
ulがolに変わるだけなので、簡単ですね。ちなみにolは「Ordered List」の頭文字で、ulは「Unordered List」の頭文字です。
序列リストを降順に表示する
では、先ほどのリストを降順に表示してみましょう。
日本の高い山ベスト5
- 槍ヶ岳
- 間ノ岳
- 奥穂高岳
- 北岳
- 富士山
このように、ランキング形式でベスト1を最後に見せたい場合などに利用できますね。
リストの数字を指定するには
上記の日本の高い山は、ランキングには実は間違いがあります。
3位の奥穂高岳と4位の間ノ岳は、同じ高さなので、正しくは同率3位としなければいけません。
このような時は、li要素の属性を使って表示する数値を指定することができます。
- 富士山
- 北岳
- 奥穂高岳
- 間ノ岳
- 槍ヶ岳
3が二回続いてその次が5となっています。
HTMLではどんな記述をしているのか、見てみましょう。
このように value属性を使って、数値を直接指定することも可能です。
5位の槍ヶ岳は、なにも設定しないと「4」と表示されてしまうので、valueで「5」と指定する必要があるので注意しましょう。
リストマーカーの形式を指定する
序列リストのマーカー（行頭の数字）は、用途に合わせて変更することができます。
デフォルトでは、英数字が使われますが、type属性からアルフェベット（大文字・小文字）やローマ数字（大文字・小文字）に変更できます。
- りんご
- バナナ
- みかん
- いちご
type属性で指定できる値は以下の通りです。
1: 英数字「1」「2」「3」
a: アルファベット（小文字）「a」「b」「c」
A: アルファベット（大文字）「A」「B」「C」
i: ローマ数字（小文字）「ⅰ」「ⅱ」「ⅲ」
I: ローマ数字（大文字）「Ⅰ」「Ⅱ」「Ⅲ」
定義リストをHTMLで表示する
これまでのリストは馴染みがありますが、定義リストは使ったことがない人も多いと思います。
しかし、意外と使えるシーンに遭遇するケースがあるので、このタグを知っているとかなり便利です。
- スーパーカブ
-
ホンダの世界最多量産のオートバイで、高性能・高耐久性のゆえ、世界最多量産ならびに販売台数を記録している。
- ヤマハ・メイト
-
ヤマハ発動機（ヤマハ）が1965年から2008年まで製造販売したビジネス用オートバイのこと。
さきに挙げたリストと違うのは、「語句」と「説明文」が一組になって、リスト表示されるということです。
HTMLでは以下のような記述になります。
必ずdtタグとddタグが一対になって、全体をdlタグが囲むイメージが頭に入ってくれば、使うのにそれほど難しいことはないでしょう。
このdlタグは、用語集やFAQ（Q＆A）などに使うと、すっきりまとまって使いやすくなります。また、検索エンジンにも正しく評価されやすくなる可能性も高くなります。
