HTMLでは、伝えたい項目を見やすくリスト化する場合に箇条書き要素のul
やol
、説明リスト要素のdl
が利用できます。とっても似てるので、使うときに迷ってしまいますよね…。
- 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>
- word
- ワープロソフトです。
- Excel
- 表計算ソフトです。
「ul」で順序のない箇条書きを作る
ulは、順序のない箇条書きを作成するときに使います。
「ul」の基本的な使い方
<ul>~</ul>の間にはli
タグを挟み、リスト項目を表示します。

<ul>
<li>りんご</li>
<li>みかん</li>
<li>いちご</li>
</ul>
- りんご
- みかん
- いちご
リストマーカーを変える:list-style-type
ulを使った箇条書きリストでは、初期値のリストマークは「●」(黒丸)です。
このマークを変えるには、CSSのlist-style-type
を使います。
セレクタ{ list-style-type: スタイル;}
- disc
- 黒丸「●」が表示される。
- circle
- 白丸「○」が表示される。
- square
- 四角形「■」が表示される。
<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";
}
- Android
- Chrome
- Safari
※ 文字列にUnicodeを指定して絵文字を表示していま。
この方法だと、マーカーだけに色やサイズを指定できません。そのため、任意の文字列や記号をマーカーに使う場合は疑似要素「::before」を使うのが一般的です。
「ol」で順序のある箇条書きを作る
olは、順序のある箇条書きを作成するときに使います。
「ol」の基本的な使い方
<ol>~</ol>の間にはli
タグを挟み、リスト項目を表示します。

<ol>
<li>材料を切る。</li>
<li>フライパンで炒める。</li>
<li>味付けをする。</li>
</ol>
- 材料を切る。
- フライパンで炒める。
- 味付けをする。
リストの開始番号を指定する:start
olで作る順序のある番号付きリストは、初期値では「1」から昇順で表示されます。
start
属性を用いることで、任意の開始番号を指定することができます。
<ol start="4">
<li>材料を切る。</li>
<li>フライパンで炒める。</li>
<li>味付けをする。</li>
</ol>
- 材料を切る。
- フライパンで炒める。
- 味付けをする。
リストを逆順(降順)にする:reversed
reversed
属性を追加すると、リストの順序を逆にすることができます。
<ol reversed>
<li>チョコレートケーキ</li>
<li>ショートケーキ</li>
<li>チーズケーキ</li>
</ol>
- チョコレートケーキ
- ショートケーキ
- チーズケーキ
二桁の数字で表示する(01,02,03…):decimal-leading-zero
decimal-leading-zero
を指定すると、二桁の数字で表示できます。
<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
も同じです。
- cjk-ideographic
- 漢数字 (一, 二, 三…)
- upper-roman
- 大文字ローマ数字 (I, II, III…)
- lower-roman
- 小文字ローマ数字 (i, ii, iii…)
- upper-alpha
- 大文字アルファベット (A, B, C…)
- lower-alpha
- 小文字アルファベット (a, b, c…)
- hiragana
- ひらがな (あ、 い、 う…)
- katakana
- カタカナ (ア、 イ、ウ…)
- hiragana-iroha
- いろは (い、ろ、は…)
- katakana-iroha
- イロハ (イ、ロ、ハ…)
<ol>
<li>Android</li>
<li>Chrome</li>
<li>Safari</li>
</ol>
ol{
list-style-type: hiragana;
}
- Android
- Chrome
- Safari
「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>
- 定休日は?
- 毎月、第3月曜日をお休みします。
- 駐車場は?
- 2台分の駐車場がございます。