HTMLでリストを作ろう！内容によって3種類のリストを使い分ける

リストとは箇条書きのことです。

「やることリスト」や「好きなフルーツの一覧」などのように、項目が多い内容を伝えたい場合、箇条書きをうまく使うことで普通の文書よりも分かりやすく伝える事ができます。

リストはHTMLを使う上でとても頻繁に使われる要素なので覚えておきましょう。

リストは3種類

HTMLのリストは用途別に以下の3種類が用意されています。

• 順序なしリスト
• 順序のあるリスト
• 説明リスト

順序なしリストと、順序のあるリスト

順序なしリストと順序のあるリストの違いは、箇条書きの項目の順序に意味があるかないかです。順序にとくに意味がない場合は「順序なしリスト」を、順序に重要な意味がある場合は「順序のあるリスト」を使いましょう。

ブラウザで表示すると、順序なしリスト箇条書きの行頭が「・」になるのに対し、順序のあるリストは行頭に番号が振られます。

説明リスト

説明リストは、「語句」とその「説明」がセットになったリストです。

例えば下記のように、「フルーツ名」と「その説明」がセットになったものなどに使われます。

適切なリストを選ぼう

このように3種類のリストが用意されているので、そのときに使いたい文脈によってどれを使うか選びましょう。

例えば、好きなフルーツ一覧なら順序なしのリストでいいでしょうし、好きなフルーツランキングなら順序ありのリストを使うべきでしょう。

好きなフルーツとその説明文であれば説明リストを使うとうまくまとまりそうです。

順序なしのリストの使い方

順序なしのリストは順序が重要ではない箇条書きを示します。

持ち物リストだったり、好きなフルーツの箇条書きなどのような、順序を気にしない箇条書きの場合はこちらを使いましょう。

ブラウザで見ると行頭に「・」が表示されます。

HTML構文

順序なしのリストは<ul>と<li>をセットで使います。ul要素は順序なしのリストを示し、その中のli要素がリストの項目を示しています。

<ul>
    <li>りんご</li>
    <li>バナナ</li>
    <li>キウイ</li>
</ul>

ul要素について

ulはUnordered List （順序なしのリスト）の略で、特に順序が意味を持たないリストを示します。

li要素について

liはList Item の略です。順序のあるリスト<ol> や 順序なしのリスト<ul> のリストの中身を示します。

順序のあるリストの使い方

順序のあるリストです。ul要素との違いは、箇条書きの行頭に1から順に番号が振られます。

「好きなフルーツランキング」などのように、順序が重要な意味を持つリストの場合はこちらを使いましょう。

HTML構文

順序のあるリストは<ol>と<li>をセットで使います。ol要素は順序のあるリストを示し、その中のli要素がリストの項目を示しています。

<p>好きなフルーツランキング</p>
<ol>
    <li>バナナ</li>
    <li>キウイ</li>
    <li>りんご</li>
</ol>

ol要素について

<ol> は Ordered Listの略です。順序のあるリストを示します。<ul>同様、リストの各項目は<li>を使用します。

説明リスト

説明リストとは、ある「語句」とその語句の「説明」がセットになったリストです。

かならず、語句に対しての説明が必要です。

よくある使い方としては下記のようなものがあります。

• Q&A
• 語句とその説明
• 料金表
• 会社概要(資本金…1000万円など)

HTML構文

説明リストは<dl>で示します。

<dl>要素のなかに、「語句」を<dt>要素で、「説明」を<dd>要素で記述します。

<dl>
    <dt>質問1</dt>
    <dd>答え1の内容</dd>
    <dt>質問2</dt>
    <dd>答え2の内容</dd>
</dl>

<dt>要素と<dd>要素はセットで使う必要があります。<dt>要素であげられた語句は、後続する<dd>要素で説明されていなければなりません。

また下記のように、1つの<dt>要素に対し複数の<dd>要素を使用しても問題ありませんし、逆に複数の<dt>要素に対し1つの<dd>要素でも問題ありません。

<dl>
    <dt>質問1</dt>
    <dd>答え1の内容①</dd>
    <dd>答え1の内容②</dd>
    <dd>答え1の内容③</dd>
    <dt>質問2①</dt>
    <dt>質問2②</dt>
    <dd>答え2の内容</dd>
</dl>

dl要素について

<dl>は、description listの略で、説明リストを示します。

dt要素について

<dt>は、description termの略で説明する言葉を示します。

dd要素について

<dd>は、definition・descriptionの略で定義文や説明文を示します。

まとめ

• リストには3種類あるので適切な物を選ぶ
• 順序なしのリストは、順序が重要ではない箇条書き
• 順序のあるリストは、順序が重要な意味を持つ箇条書き
• 説明リストとは、ある「語句」とその語句の「説明」