【HTML】箇条書き（ul、ol）と説明リスト（dl）使い分け

HTMLでは、伝えたい項目を見やすくリスト化する場合に箇条書き要素のulやol、説明リスト要素のdlが利用できます。とっても似てるので、使うときに迷ってしまいますよね…。

3つのタグの違いと、それぞれの使い方を見ていきましょう。

「ul」「ol」「dl」の違い

• ulは Unordered List (順序の無いリスト) の略で、順序のないリストを作ります。
  orderedの否定の意味で「Un」が付いてるのがミソです。
• olは ordered list（順序のあるリスト）の略で、順序のある番号付きリストを作ります。
• dlは definition list（定義リスト）の略です。用語の説明をする場合などに使われ、用語とその説明をセットにして作成されます。

箇条書きサンプル

箇条書きは、<ul>～</ul>、または、<ol>～</ol>の間にliタグを挟みます。

初期値では、ulは黒丸「●」が、olでは「1、2、3…」と番号が付きます。

<ul>
  <li>玉ねぎ</li>
  <li>にんじん</li>
  <li>じゃがいも</li>
</ul>

<ol>
  <li>玉ねぎ</li>
  <li>にんじん</li>
  <li>じゃがいも</li>
</ol>

説明リストサンプル

説明リストは、<dl>～</dl>の間にdt（用語）とdd（説明文）を挟みます。

<dl>
  <dt>Word</dt>
  <dd>ワープロソフトです。</dd>
  <dt>Excel</dt>
  <dd>表計算ソフトです。</dd>
</dl>

「ul」で順序のない箇条書きを作る

ulは、順序のない箇条書きを作成するときに使います。

「ul」の基本的な使い方

<ul>～</ul>の間にはliタグを挟み、リスト項目を表示します。

例えば…

<ul>
   <li>りんご</li>
   <li>みかん</li>
   <li>いちご</li>
</ul>

ブラウザ表示

• りんご
• みかん
• いちご

リストマーカーを変える：list-style-type

ulを使った箇条書きリストでは、初期値のリストマークは「●」（黒丸）です。

このマークを変えるには、CSSのlist-style-typeを使います。

<ul>
	<li>りんご</li>
	<li>みかん</li>
	<li>いちご</li>
</ul>

ul{
   list-style-type: square;
}

マーカーを表示しない： none

noneを指定すると、マーカーを非表示にできます。

<ul>
	<li>りんご</li>
	<li>みかん</li>
	<li>いちご</li>
</ul>

ul{
   list-style-type: none;
}

任意の文字列や記号を使う

list-style-typeの値に文字列を使う場合は、引用符"で囲みます。

<ul>
	<li>りんご</li>
	<li>みかん</li>
	<li>いちご</li>
</ul>

ul{
   list-style-type: "★ ";
}

<ul>
	<li>Android</li>
	<li>Chrome</li>
	<li>Safari</li>
</ul>

ul{
   list-style-type: "\1f4bb";
}

この方法だと、マーカーだけに色やサイズを指定できません。そのため、任意の文字列や記号をマーカーに使う場合は疑似要素「::before」を使うのが一般的です。

「ol」で順序のある箇条書きを作る

olは、順序のある箇条書きを作成するときに使います。

「ol」の基本的な使い方

<ol>～</ol>の間にはliタグを挟み、リスト項目を表示します。

例えば…

<ol>
   <li>材料を切る。</li>
   <li>フライパンで炒める。</li>
   <li>味付けをする。</li>
</ol>

ブラウザ表示

1. 材料を切る。
2. フライパンで炒める。
3. 味付けをする。

リストの開始番号を指定する：start

<ol start="4">
   <li>材料を切る。</li>
   <li>フライパンで炒める。</li>
   <li>味付けをする。</li>
</ol>

リストを逆順（降順）にする：reversed

reversed属性を追加すると、リストの順序を逆にすることができます。

<ol reversed>
   <li>チョコレートケーキ</li>
   <li>ショートケーキ</li>
   <li>チーズケーキ</li>
</ol>

<ol>
   <li>チョコレートケーキ</li>
   <li>ショートケーキ</li>
   <li>チーズケーキ</li>
</ol>

ol{
   list-style-type: decimal-leading-zero;
}

数字の種類を変える：list-style-type

olで表示される順序の初期値はdecimalで、「1,2,3…」というアラビア数字です。

list-style-typeを使えば、順序のある／なしに関係なくスタイルの設定が可能です。

list-style-typeの使い方は、ulもolも同じです。

<ol>
	<li>Android</li>
	<li>Chrome</li>
	<li>Safari</li>
</ol>

ol{
   list-style-type: hiragana;
}

「dl」で説明リストを作る

dl要素を使うと、説明リストを作ることができます。dlは、用語とその説明部分がセットになるように組み立てます。用語はdtを使い、用語説明部分はdd使って表現します。

dl、dt、ddの3つをセットで覚えましょう。

<h2>[Q&A]</h2>
<dl>
  <dt>定休日は？</dt>
  <dd>毎月、第3月曜日をお休みします。</dd>
  <dt>駐車場は？</dt>
  <dd>2台分の駐車場がございます。</dd>
</dl>

【CSS】箇条書きリストマーク・数字【一覧表】

CSSで作る箇条書きのリストマークは、list-style-typeでマークの種類を指定できます。豊富なマーカーの中から、日本語文書用に抜粋して一覧にしています。

pasoviva.com