HTMLタグでリスト順を表示する方法

HTMLでリスト項目を作成したいけど、どのタグを入れたらいいか分からない・・・。

HTMLでリストを作成する場合、定義の有無によって適切なHTMLタグが変わっていきます。

今回は、「HTMLでリストを表示する方法」について解説します。

基本的なリスト項目をHTMLで作成する方法

HTMLで基本的なリストを作成する場合、以下のタグを使います。

• liタグ
• olタグ
• ulタグ

liタグとは

<li>サンプルテキスト</li>

liタグとは、リスト項目をHTMLで表示するのに必要なタグです。

olタグに囲まれたliタグは、数字によるリストを表示します。また、value属性を使うことで、1以外の数値から順序を開始するリストを表示することもできます。

olタグとは

<ol><!--順序ありのリスト-->
<li>テキスト1</li>
<li>テキスト2</li>
<li>テキスト3</li>
</ol>

olタグとは、順序のあるリストを表示するためのタグです。

属性

ulタグとは

<ul><!--順序無しリスト-->
<li>テキスト1</li>
<li>テキスト2</li>
<li>テキスト3</li>
</ul>

ulタグとは、順序のないリストを表示するためのタグです。

サンプルコード

<p>▼順序無しリスト</p>
<ul><!--順序無しリスト-->
<li>犬</li>
<li>猫</li>
<li>ウサギ</li>
<li>ハムスター</li>
<li>フェレット</li>
</ul>
<p>▼順序ありのリスト</p>
<ol><!--順序ありのリスト-->
<li>犬</li>
<li>猫</li>
<li>ウサギ</li>
<li>ハムスター</li>
<li>フェレット</li>
</ol>

ブラウザでは以下のように表示されます（上部分が順序無しリスト、下部分が順序付リストです）。

定義（説明）のあるリストをHTMLで作成する

定義（説明）のあるリストを作成する場合は、以下のタグを使います。

• dlタグ・・・定義（説明）のあるリストを表示
• dtタグ・・・定義（説明）する内容を表示
• ddタグ・・・その定義の用語を説明する時に表示する

サンプルコード

<dl>
<dt>主な果物</dt>
<dd>リンゴ</dd>
<dd>ミカン</dd>
<dd>バナナ</dd>
<dd>イチゴ</dd>
<dd>グレープフルーツ</dd>
</dl>

ブラウザで表示すると、以下の通りとなります。

まとめ

みきてぃ東西線

冒頭にも書いた通り、「基本的なリスト項目」と「定義（説明）のあるリスト項目」にて使われるHTMLタグは、それぞれ以下の通りだよ！

というわけで、今回は「HTMLでリストを表示する方法」について解説しました。

同じリストでも、順序あり/なし、および定義（説明）の有無によって、必要なタグは変わっていきますので、適宜使い分けることをオススメします。