HTMLリストの作り方：3種類のリストタグをステップバイステップで解説

HTMLのリストタグは、Webページ上にリストを作成するために使用される要素です。順序付きリスト（番号付き）、順序なしリスト（箇条書き）、記述リスト（定義リスト）の3種類を作成できます。

Webページを作成していると、情報を見やすく整形されたリスト形式で表示したい場面が多くあります。例えば、学生の名簿をリスト形式で表示したり、ブログ記事の一覧を整理して提示したりするケースが挙げられます。

HTMLには、リストを作成するための機能が標準で備わっています。このチュートリアルでは、HTMLのリストの種類と、それぞれをWebページに実装する方法を詳しく解説します。

HTMLリストの種類

HTMLには3種類のリストがあり、それぞれ異なる目的とコードを持っています。

• 順序付きリスト（Ordered List）：特定の順序で項目を並べるリストを作成します。
• 順序なしリスト（Unordered List）：順序のない項目のリストを作成します。
• 記述リスト（Description List）：項目とその説明をセットで表示するリストを作成します。

リストはWebページのどこにでも配置できます。本文中に埋め込んだり、改行の後に置いたり、さらには別のリストの中に入れ子にして「ネストされたリスト」を作ることも可能です。それでは、3種類のリストの作成方法を順番に見ていきましょう。

順序付きリスト（Ordered List）

順序付きリストは、リスト内の項目の順番が重要な場合に使用します。例えば、特定の順序で実行する必要がある手順書などが該当します。順序付きリストは、番号が自動的に付けられるリストです。

順序付きリストは<ol>タグを使用し、リストの各項目には<li>タグを使います。以下は順序付きリストの例です。

<ol>
	<li>ボウルに薄力粉100g、卵2個、牛乳300ml、ひまわり油大さじ1を入れて混ぜます。</li>
	<li>生地を30分間休ませます。</li>
	<li>中火にかけたフライパンの表面に、油を含ませたキッチンペーパーで薄く油を塗ります。</li>
	<li>生地をフライパンに流し入れ、両面を各1分ずつ焼きます。</li>
</ol>

上記の例では、パンケーキの基本的なレシピを作成しました。各ステップは必ず順番通りに行う必要があるため、順序付きリストを選択しています。このコードの出力結果は以下のようになります。

順序付きリストは通常、数字の1から始まり昇順で番号が付いていきます。しかし、リストを別の番号から始めたい場合は、start属性を以下のように指定できます。

<ol start="5">
	<li>パンケーキをお皿に移します（複数枚作る場合は手順2〜4を繰り返します）。</li>
	<li>バター、メープルシロップ、レモンなどのお好みのトッピングを添えます。</li>
	<li>パンケーキをお楽しみください！</li>
</ol>

この新しいリストは以下のように表示されます。

順序なしリスト（Unordered List）

項目の順番が重要でないリストを作成したい場合は、HTMLの順序なしリストタグを使用します。順序なしリストは<ul>タグで作成し、各項目は順序付きリストと同様に<li>タグで記述します。

以下は順序なしリストの例です。

<ul>
	<li>Alex</li>
	<li>Carol</li>
	<li>Lucy</li>
	<li>Shawn</li>
</ul>

このリストは以下のように表示されます。

記述リスト（Description List）

リストを作成する際、各項目に説明を加えたい場合があります。例えば、学生名簿のリストに成績を追加したいけれど、メインのリストテキストの一部としては表示したくないといったケースです。

そんなときに役立つのが記述リストです。記述リストは、各項目に説明が付いたリスト形式です。リスト全体は<dl>タグで作成し、主要な項目（用語）には<dt>タグ、その説明（定義）には<dd>タグを使用します。

以下はHTMLでの記述リストの例です。

<dl>
	<dt>エコノミークラス</dt>
	<dd>標準的な座席、機内食サービスなし。</dd>
	<dt>ファーストクラス</dt>
	<dd>高級座席、ケータリングサービス付き。</dd>
</dl>

このコードは以下のようなリストを出力します。

ご覧のとおり、航空機のクラス名がリスト形式で表示され、それぞれの説明が各項目の下に表示されています。さらに、各説明文はインデントされているため、リスト項目と視覚的に区別できるようになっています。

まとめ

リストはHTMLにおいて欠かせない重要な要素であり、開発者が情報を見やすく整形して提示することを可能にします。リスト形式はユーザーにとって読みやすさを向上させるだけでなく、開発者が情報構造をより細かく制御するのにも役立ちます。

このチュートリアルでは、HTMLの3種類のリスト、すなわち<ol>と<li>タグを使う順序付きリスト、<ul>と<li>タグを使う順序なしリスト、そして<dl>・<dt>・<dd>タグを使う記述リストの作成方法を学びました。これであなたも、プロのようにHTMLでリストを作成できるようになります！