リスト:簡潔な情報表現

情報を見やすく整理して表現する方法として、リスト(一覧)はとても効果的です。HTMLでは、項目を列挙するul要素、順序を考慮して列挙するol要素、用語とその説明という定義型のリストを構成するdl要素の3つのリスト要素が用意されています。

目次:

取り上げる要素: ul ol li dl dt dd

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

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

一つの段落が長くなってしまう場合は、そこで述べようとしているポイントを箇条書きにすると、簡潔に表現することができます。また、複数の段落に分けて書いている内容も、叙述的に述べていくより、それぞれの段落を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>

とすると

(表示例)

  1. まず良く洗ってから皮をむき
  2. それからおもむろに囓りつく

のようになります。

定義型リスト

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

(記述例)

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

とすると

(表示例)

りんご
赤い色をした丸い果物。
バナナ
黄色い色をした細長い果物。

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

やや複雑な定義型リスト

HTML 4では、dt要素、dd要素は一つずつ交互に使用する必要はなく、複数の言葉をまとめて定義したり、一つの言葉に複数の定義を与えたりすることができます。

(記述例)

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

というリストでは、「りんご」と「apple」に共通の定義を与え、「バナナ」には複数の定義を与えています。

(表示例)

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

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

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

並列列挙、順序付きリストの内容モデル

ol, ul要素の内容モデルはli要素に限られます。逆にli要素はol,ulの子要素としてしか記述できません(×:body要素の直接の子要素としてliを記述してはいけません>たまに使っている人)。

li要素の内容には、テキストやインライン要素を記述できるほかに、段落などのブロックレベル要素も含むことができます。これを利用して、最初に述べた「それぞれの段落を1項目としてリストにする」という表現も可能になります。

定義型リストの内容モデル

dl要素の内容モデルは、dt要素もしくはdd要素に限られます。×:従って、dl要素の直接の子要素としてもう一つdl要素を持ってくることはできません(誤った使用例を参照)。

dt要素の内容はインライン要素に限られますが、dd要素はインライン要素、ブロックレベル要素のどちらも内容とすることができます。つまり、定義対象(dt要素)にできるのは単語やフレーズのみですが、その説明(dd要素)は複数の段落や図表を含んだものであっても良いというわけです。事典でのそれぞれの役割を考えるとこの使い分けを理解しやすいと思います。

〔補足〕

DON'T! 誤った使用例

<dl>や<dd>を用いると、多くのブラウザはインデント(段落の左側にスペースを空けて読みやすくすること)して表示します。だからといって、これらの要素を、単にインデントの目的で使ってはいけません。たとえば

(誤った例)

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

とすると、確かに左にスペースが空くかも知れませんが、これでは何の定義リストにもなっていませんね(しかもdl要素の子要素になり得るのはdt、ddのみなので、内側のdlは文法的にも誤り)。余白が欲しい場合は、スタイルシートでマージンを設定してください。

リストの入れ子

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

(記述例)

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

とすると

(表示例)

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

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

リスト要素の終了タグ

基本的な要素で述べたように、タグは開始タグと終了タグをペアで使います。従って、リストの要素を示す <li>, <dt>, <dd> はそれぞれ対応する </li>, </dt>, </dd> で閉じる必要があります。

入れ子になっているリストの場合、ul要素の内容モデルはli要素に限られることから、

(誤った例)

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

ではなく(×:内側のul要素が、外側のul要素の直接の子要素になっている)

(正しい例)

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

という書き方が正しいことになります(:内側のul要素は、li要素の子要素になっている)。