Blog Post

情報を整理するリスト系タグの使い方

　前回記事(文章のまとまりを正しく伝えるタグの使い方 pタグ、brタグ、hrタグ)では文章のまとまりをタグで表現する方法を解説しました。今回は、情報をさらに見やすく整理するための「リスト構造」について解説します。

順不同リスト(ulタグ、liタグ)

　順不同リストは複数の情報を同列で見せたいときに使います。リストで表示したい要素をliタグで囲み、それをさらにulタグで囲みます。タグを使用しただけの状態では「・」がリスト要素の前につき、縦に並びます。本記事では解説しませんが、「・」を消したり見た目を変更したい場合やリストを横に並べたい場合はCSSを使用します。ホームページのヘッダーはこの順不同リストを使用して作られています。

　「・」をつけて縦に並べるだけであれば、「・」をリスト要素の文字列に含めてbrタグで改行すればいいのでは？と疑問が浮かんだ方いると思います。ulタグ、liタグを使うことでブラウザや検索エンジンに各要素が同列なリストであると認識させることができます。一方、「・」をリスト要素の文字列に含めてbrタグで改行する方法では「・」がついた文字列と認識されます。セマンティックHTMLを意識するうえでこのタグは覚えておきましょう。

html

<ul>
 <li>りんご</li>
 <li>バナナ</li>
 <li>みかん</li>
</ul>

順序付きリスト(olタグ、liタグ)

　順序付きリストは順不同リストと異なり、道案内など明確に順序を示してリスト表示したい場合に使用します。リストで表示したい要素をliタグで囲み、それをさらにolタグで囲んで使用します。表示すると上から順に「1.」、「2.」・・・と連番が割り振られます。pタグと併用する際のルールはulタグと同様です。

html

<ol>
    <li>東京駅でJRに乗る</li>
    <li>渋谷駅で降りる</li>
    <li>ハチ公改札を出る</li>
</ol>

説明リスト(dlタグ、dtタグ、ddタグ)
　説明リストは項目名とその説明をセットにしたリストです。説明したい項目をdtタグで囲み、その項目に対する説明をddタグで囲みます。dtタグとddタグの組みを1セットとしてそれをdlタグで囲んで使用します。dtタグに対するddタグの数は1つではなく複数でも使用できます。逆に複数のdtタグに対してddタグで説明を加えることもできます。別名などを項目に置きたい場合に使用します。

html

<dl>
 <dt>説明したい項目1</dt>
 <dd>説明分</dd>

 <dt>説明したい項目2</dt>
 <dd>説明分</dd>
 <dd>説明文</dd>

 <dt>説明したい項目3</dt>
 <dt>説明したい項目4</dt>
 <dd>説明分</dd>
</dl>

リスト系タグとpタグの併用時のルール

　段落の中でリストを表示したりしたい場合があると思います。リスト系のタグとpタグを使用するのですが、使用する場合のルールがあります。単純に考えるとulタグ自体をpタグで囲めばいいように思うかもしれません。ですが、HTMLではpタグは文章を囲むもの、リスト系タグはリストを囲むものと決められていて検索エンジンやブラウザに情報を伝えることができます。例としてulタグ、liタグを使用している場合で解説します。pタグの次にulタグがおかれるとバージョンによってはレイアウト崩れの原因になります。では、リストの前後に文章を書きたいときはどうするのかについて解説します。ulタグの開始タグ前の文章と終了タグの後の文章をpタグで囲みます。ulタグと同様にliタグもpタグで囲む必要はありません。また、liタグで囲んだリスト要素が単語レベルの短い文字列であればpタグは不要です。一方、長い文章や複数の段落をliタグで囲む場合はliタグの中であってもpタグで囲みます。

html

<p>テキスト</p>
<ul>
    <li>項目A</li>
    <li>項目B</li>
</ul>
<p>テキスト</p>

<関連記事>

前回の記事　文章のまとまりを正しく伝えるタグの使い方 pタグ、brタグ、hrタグ
次回の記事　情報を整理するテーブル系タグの使い方