リスト：簡潔な情報表現

リストで情報を分かりやすく整理する

基本的には本文は見出しと段落だけで構成できるはずです。しかし、一連の並列される情報や、順序立ててステップを説明するような内容は、リストとして表現する方が分かりやすいことがあります。

一つの段落が長くなってしまう場合は、そこで述べようとしているポイントを箇条書きにすると、簡潔に表現することができます。また、複数の段落に分けて書いている内容も、叙述的に述べていくより、それぞれの段落を1項目としてリストにした方が理解しやすくなる場合が少なくありません。

適当にリストを交えてメリハリをつけるのも、読みやすく理解しやすい文章を書く上では大切な工夫です。情報の種類に応じて、次の3つのリストを使い分けてください（情報の性質によってはテーブルを使う方が適切な場合もあります）。

並列列挙リスト

項目の順序があまり大きな意味を持たず、並列的に列挙するときにはul要素を用います。それぞれの項目はli要素で示します（ULはUnordered Listの略、LIはList Itemの略です）。

<ul>で始め、リストの各項目を<li>と</li>で囲んで列挙し、</ul>で閉じます。例えば

<ul>
  <li>私が好きな真っ赤なりんご</li>
  <li>あなたが好きなのはバナナ</li>
</ul>

とすると

のようになります。

順序付きリスト

項目の順序が意味を持つ場合、あるいはあとで項目を参照するために番号を付ける場合などは、ol要素でリストを作成します（OLはOrdered Listの略です）。<ol>で始め、リストの各項目を<li>と</li>で囲んで列挙し、</ol>で閉じます。例えば

<ol>
  <li>まず良く洗ってから皮をむき</li>
  <li>それからおもむろに囓りつく</li>
</ol>

とすると

のようになります。

定義型リスト

dl要素は辞書のような形のリストで、用語（dt要素）とその定義（dd要素）からなります。<dl>で始め、これらの要素を列挙して</dl>で閉じます。例えば

<dl>
  <dt>りんご</dt>
    <dd>赤い色をした丸い果物。</dd>
  <dt>バナナ</dt>
    <dd>黄色い色をした細長い果物。</dd>
</dl>

とすると

のようになります。多くのブラウザでは、dd要素をインデントして表示しますが、必ずしも全てのブラウザでそうなるとは限りません（このページではスタイルシートでdt要素の表示を設定しているので、対応するブラウザでは定義語が太字で強調されますが、これも一般的にそうなるわけではありません）。

<dl>
 <dt>りんご</dt>
 <dt>apple</dt>
  <dd>赤い色をした丸い果物。</dd>
 <dt>バナナ</dt>
  <dd>黄色い色をした細長い果物。</dd>
  <dd>あなたが好きだといった食べもの。</dd>
</dl>

リスト要素はブロックレベル

リストは段落と並列の位置づけで、それ自体が本文の構成要素ですから、ul、ol、dlいずれの要素もブロックレベル要素のグループに含まれます。

<dl>
  <dl>
    <dd>画面の左に広いマージンを取って、すっきりしたレイアウトに
    したければ、スタイルシートを使いましょう。</dd>
  </dl>
</dl>

リストの入れ子

リストはその内部に更にリストを持つ「入れ子」構造を取ることができます。たとえば

<ul>
  <li>私が好きな真っ赤なりんご
    <ul>
      <li>りんごといえばやはり陸奥</li>
      <li>いいえ、なんといってもマッキントッシュ</li>
    </ul>
  </li>
  <li>あなたが好きなのはバナナ</li>
</ul>

とすると

のようになります。<ul>だけでなく、ほかのリスト要素でも同様です。

<ul>
  <li>私が好きな真っ赤なりんご</li>
  <ul>
    <li>りんごといえばやはり陸奥</li>
  </ul>
</ul>

<ul>
  <li>私が好きな真っ赤なりんご
    <ul>
      <li>りんごといえばやはり陸奥</li>
    </ul>
  </li>
</ul>