【HTML入門】箇条書きと説明リスト【ul,ol,dlの使い分け】

HTMLでは、伝えたい項目を見やすくリスト化する場合、箇条書き要素のulol、説明リスト要素のdlが利用できます。

ul
順序のない箇条書きを作ります。
ol
順序のある箇条書きを作ります。
dl
説明リストを作ります。

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

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

  • ulUnordered List (順序の無いリスト) の略で、順序のないリストを作ります
  • olordered list(順序のあるリスト)の略で、順序のある番号付きリストを作ります
  • dldefinition list(定義リスト)の略です。用語の説明をする場合などに使われ、用語とその説明分がセットになる形で作成されます。

箇条書きサンプル

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

初期値では、各項目の前に黒丸「●」が付きます。

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

<ol>
  <li>玉ねぎ</li>
  <li>にんじん</li>
  <li>じゃがいも</li>
</ol>
ブラウザ表示
  • 玉ねぎ
  • にんじん
  • じゃがいも
  1. 玉ねぎ
  2. にんじん
  3. じゃがいも

説明リストサンプル

説明リストは、<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>
ブラウザ表示
  • りんご
  • みかん
  • いちご

リストマーカーを変えるには

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

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

 セレクタ{ list-style-type: スタイル;} 

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

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

例えば…
<ul>
	<li>りんご</li>
	<li>みかん</li>
	<li>いちご</li>
</ul>
ul{
   list-style-type: none;
}
ブラウザ表示
  • りんご
  • みかん
  • いちご
定義済みスタイルを使う

リストマーカーの種類を定義したキーワードを使うことができます。

主なスタイル
disc
黒丸「●」が表示される。
circle
白丸「○」が表示される。
square
四角形「■」が表示される。

CSS3では、box( 白四角)、check( チェックマーク)、diamond(ダイヤモンドマーク)、dash(ダッシュ)などが追加されていますが、ブラウザ未対応が多い状態です。

例えば…
<ul>
	<li>りんご</li>
	<li>みかん</li>
	<li>いちご</li>
</ul>
ul{
   list-style-type: square;
}
ブラウザ表示
  • りんご
  • みかん
  • いちご

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

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"; // PC
}
ブラウザ表示
  • Android
  • Chrome
  • Safari

※ 文字列にUnicodeを指定して絵文字を表示していま。

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

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

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

「ol」の基本的な使い方

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

例えば…
<ol>
   <li>材料を切る。</li>
   <li>フライパンで炒める。</li>
   <li>味付けをする。</li>
</ol>
ブラウザ表示
  1. 材料を切る。
  2. フライパンで炒める。
  3. 味付けをする。

開始番号を指定する

olで作る順序のある番号付きリストは、初期値では「1」から昇順で表示されます。

start属性を用いることで、任意の開始番号を指定することができます。

例えば…
<ol start="4">
   <li>材料を切る。</li>
   <li>フライパンで炒める。</li>
   <li>味付けをする。</li>
</ol>
ブラウザ表示
  1. 材料を切る。
  2. フライパンで炒める。
  3. 味付けをする。

リストを逆順(降順)にする

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

例えば…
<ol reversed>
   <li>チョコレートケーキ</li>
   <li>ショートケーキ</li>
   <li>チーズケーキ</li>
</ol>
ブラウザ表示
  1. チョコレートケーキ
  2. ショートケーキ
  3. チーズケーキ

数字の種類を変える

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

二桁の数字で表示する(01,02,03…)

decimal-leading-zeroを指定すると、二桁の数字で表示できます。

例えば…
<ol>
   <li>チョコレートケーキ</li>
   <li>ショートケーキ</li>
   <li>チーズケーキ</li>
</ol>
ol{
   list-style-type: decimal-leading-zero;
}
ブラウザ表示
  1. チョコレートケーキ
  2. ショートケーキ
  3. チーズケーキ

様々な順序スタイルを指定できる

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

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

主な順序スタイル
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
}
ブラウザ表示
  1. Android
  2. Chrome
  3. Safari

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

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

dldtddの3つをセットで覚えましょう。

例えば…
<h2>[Q&A]</h2>
<dl>
  <dt>定休日は?</dt>
  <dd>毎月、第3月曜日をお休みします。</dd>
  <dt>駐車場は?</dt>
  <dd>2台分の駐車場がございます。</dd>
</dl>
ブラウザ表示
[Q&A]
定休日は?
毎月、第3月曜日をお休みします。
駐車場は?
2台分の駐車場がございます。
タイトルとURLをコピーしました