見出しと本文など、まとまった長文を整理する方法の他に、複数のトピックを目次として見せる際の箇条書きや、単語とその単語を説明するためのリストはよく使う書式だ。今回はリストの種類と作り方を確認したい。

並列リストと定義リスト

　リスト用HTMLタグは大きく分けて2種類ある。１つは並列列挙型リストで、短いフレーズを箇条書きする際に使う。行頭に●や■などのビュレットが付いているスタイルをUnordered List（順序なしリスト）と呼ぶ。この体裁はトピックスの列挙やサイトのナビゲーションを形成する時に使用する。

  • 医療ITソリューション・病院診療所のＩＴ化
  • Winny、ワーム等から企業PCを守るには！
  • 内部統制に向けた次の一手【帳票SOA DAYS】
  • 溢れかえるスパム、忍び込むウイルスを撃退

サンプルページ
list.html
（サンプルページは別ウィンドーで開いてください。ブラウザのソースを見るコマンドでコードを確認してください。）

　上記の例のようにulタグの中にリストのユニットを挟んでタグ付けする。個々のリストを定義するliは、初期設定で行頭に黒い丸印の付くスタイルになる。

　目次など列挙する内容に順序を付けたい時はOrdered List（順序付きリスト）を使う。こちらはulタグをolタグに変更すれば作れる。初期設定ではアラビア数字だが、スタイルシートの設定でローマ数字、アルファベットなどにも変更できる。

　次の定義リストは用語とその意味を説明する記述に使う書式だ。

Biotechnology Japan
バイオテクノロジーの研究や産業化に携わる皆さんのポータルサイト。バイオ業界の現場で起きている「生の情報」を伝える
日経レストラン
飲食店を繁盛させるための詳しい実務情報を掲載。国内全域だけでなくNYやパリなど海外情報も掲載、今話題の人気店も紹介

サンプルページ
dl.html
（サンプルページは別ウィンドーで開いてください。ブラウザのソースを見るコマンドでコードを確認してください。）

　上記の例のようにリストのセットをdlタグで囲み、用語にはdtタグを、記述にはddタグでマークアップする。ddタグを与えた記述部分はデフォルトで、他の部分よりも3em程度行頭が下がるスタイルになる。ページでは商品名と商品の説明文などで利用できる。商品名を小見出しととらえてh3タグを与え、記述は段落タグでマークアップする方法もあるが、単語（あるいは人名なども）と解説のように関係性がはっきりしている部分にはこちらのタグで意味付けするほうが望ましい。

内容に合った書式を選ぶ

　リストは特にページのナビゲーションを作成する方法に該当する。ナビゲーションはサイトにとって箇条書きした目次と意味的に同じなので、ulタグで意味づけする形が自然だからだ。横一列にレイアウトしたいグローバルナビゲーションでも、リストタグでマークアップしておき、後でCSSを使ってスタイルを横方向に流し込むインライン型に変えれば良い。重要なのは、文字情報の中身や機能が、きちんとタグ、つまり書式に反映されていること。

　スタイルの工夫以前に構造設計をしっかり最適化しよう。

サンプルページ
liststyle.html
並列列挙型リストにスタイルを付けた例。インライン配置と背景色の工夫でメニューバー風に整形した
（サンプルページは別ウィンドーで開いてください。ブラウザのソースを見るコマンドでコードを確認してください。）

サンプルページ
anotherlist.html
並列列挙型リストの入れ子。グローバルからローカルへナビゲーションが展開するタイプのレイアウトに利用できる
（サンプルページは別ウィンドーで開いてください。ブラウザのソースを見るコマンドでコードを確認してください。）