HTMLリスト（ul, ol, li）の使い方を学ぶ！順序付きリストと箇条書きリスト。

今回はHTMLの「リスト」について分かりやすく説明したい。

リストはHTMLの中でも特に使用頻度が高く、効率的に使うことによりHTML文書の読みやすさを飛躍的に向上させることができる。

この記事は以下のような目的の人を対象としている。

• リストの基本的な使い方を習いたい。
• HTMLリストを目的や用途に応じてカスタマイズしたい。
• サンプルコードを基にしてリストを今すぐ使いたい。

なお、この記事では使用しているサンプルコードはHTML5・CSS3を標準として出来るだけモダンで簡易なアプローチを心がけるようにしている。

HTMLリストの基本要素と種類

HTMLのリストには、「順序付きリスト」「箇条書きリスト」「説明リスト」の3種類がある。

まずはそれらを順番に見ていこう。

olとliによる順序付きリスト

順序付きリストは1から順に番号の付けられたリスト。

リスト項目の先頭に付けられる番号などは「マーカー」と呼ばれ、設定によりローマ数字やアルファベットに変更することが可能だ。

順序付きリストは<ol>タグの間にリスト項目<li>を挟み表現する。<ol>は”Ordered List”の略だ。

<ol>
  <li>商品のコンセプト</li>
  <li>販売目標</li>
  <li>ターゲット層</li>
</ol>

上記のHTMLコードは画面上では以下のように表示される。

ulとliによる箇条書きリスト

箇条書きリストは項目を箇条書きにした順番の無いリスト。

デフォルトではマーカーとして黒丸が表示されるが、これは設定で変更することができる。

箇条書きリストを使用する際は<ul>タグの間にリスト項目<li>を挟む。<ul> は”Unordered List”の略だ。

<ul>
  <li>野球</li>
  <li>サッカー</li>
  <li>バスケットボール</li>
</ul>

上記のHTMLコードは画面上では以下のように表示される。

dl・dt・ddによる説明リスト

説明リストは語句と語句の説明の組み合わせで構成させるリスト。

説明リストは用語集やカレンダー型の情報の表示などに適している。

箇条書きリストを使用する際は<dl>タグの間に語句にあたる<dt>と語句の説明にあたる<dd>を挟んで使用する。

なお、<dl>は”Description List”の略だ。

<dl>
  <dt>ウェブサイト</dt>
  <dd>インターネット上で公開しているサイト。</dd>

  <dt>ウェブブラウザ</dt>
  <dd>ホームページの情報を閲覧するためのソフトウェア。Google ChromeやMicrosoft Edgeなどが有名。</dd>

  <dt>電子メール</dt>
  <dd>文章や画像をインターネットを介して相手のアドレス届けるための仕組み。</dd>
</dl>

上記のHTMLコードは画面上では以下のように表示される。

リスト表示のカスタマイズ

次にリストの表示をカスタマイズする方法を確認しよう。

リストのCSSプロパティ

まずはリストで使用するCSSプロパティを確認したい。

リストのCSSセレクタ

CSSにてリストを選択する方法について説明したい。

リスト全体にスタイルを適用する

リストの全体にスタイルを適用する場合は、リストにCSSクラスを追加して指定するのがいい。

<ol class="article-content">

.article-content {
  font-size: 8px;
}

ページ上に存在する全てのリストを同様にスタイリングしたい場合はol・ulなどのセレクタを直接使用してもいい。

ol {
  font-size: 8px;
}

特定のリスト項目にスタイルを適用する

リスト内の特定の項目にのみスタイルを適用したい場合は、アイテムにCSSクラスを足して指定するのがいい。

<li class="list-item-caution">ターゲット層</li>

.list-item-caution {
  color: red;
}

マーカーのみにスタイルを適用する

CSSをマーカーのみに対して適用したい場合は、マーカーの疑似要素を使う方法が一番簡単だろう。

ol > li::marker {
  color: darkblue;
}

箇条書きリストのマーカーの種類

では箇条書きリストのマーカーの種類を見ていきたい。

なお、あまりオススメは出来ないが箇条書きリストのマーカーを順序リストに対して使用することだ。

黒丸（disc）

四角（square）

白丸（circle）

マーカー無し（none）

順序付きリストのマーカーの種類

次に順序付きリストのマーカーの種類を見ていきたい。

順序付きリストのマーカーは非常にたくさんの種類があるので、ここでは特に日本のユーザに馴染みの深いものを紹介したい。

ローマ数字（upper-roman）

公的な漢字数値表記（japanese-formal）

ABC（upper-alpha）

いろは順（hiragana-iroha）

順序付きリストの番号指定方法（カスタムオーダー）

順序付きリストの番号は通常1から順番に付けられるが、それを変更したい場合もあるだろう。

目的によって変更する方法はいくつか存在するがここでは特に簡単なものを紹介したい。

リストの開始番号を指定する（start属性）

リストにstart属性を指定すればリストの開始番号を変更することができる。

<ol start="10">
  <li>1つ目のアイテム</li>
  <li>2つ目のアイテム</li>
  <li>3つ目のアイテム</li>
</ol>

上記のコード例は以下のように表示される。

項目ごとの番号を指定する（value属性）

リストのアイテムにvalue属性を指定すれば、番号を項目ごとに変更することができる。

番号を指定しなかった項目は前の項目の次の番号が割り当てられる。

<ol>
  <li value="5">1つ目のアイテム</li>
  <li value="8">2つ目のアイテム</li>
  <li>3つ目のアイテム</li>
</ol>

上記のコード例はブラウザでは以下のように表示される。

リストの中にリストを入れる（入れ子リスト）

HTMLではリストの中にリストを作成することもでできる。

ここではその作成方法とCSSセレクタの指定方法について確認しよう。

入れ子リストを作成する

入れ子リストの作成方法は簡単でHTMLでリストの中にリストを記述すればいい。

異なる種類のリストを組み合わせることもできる。

<ul>
  <li>お茶
    <ul>
      <li>緑茶</li>
      <li>ウーロン茶</li>
    </ul>
  </li>
  <li>コーヒー
    <ul>
      <li>アメリカン</li>
      <li>カプチーノ</li>
      <li>1エスプレッソ</li>
    </ul>
  </li>
  <li>コーラ</li>
</ul>

入れ子リストのアイテムのセレクタ

入れ子リストの2段目のリストにスタイリングを適用したい場合は以下のようにセレクタを使用する。

ul > li > ul {
  color: green;
}

同様に3段目にスタイリングを加えたい場合は以下のようにセレクタを指定する。

ul > li > ul > li > ul {
  color: violet;
}

入れ子リストで階層構造の章を作る

HTMLを使用してwordドキュメントの目次のような章構造を作りたい場合は、順序付きリストを使用してにCSSでマーカーを変更する。

<ol>
  <li>製品のコンセプト</li>
  <li>製品の特徴
    <ol>
      <li>新技術による高解像度</li>
      <li>直感的な操作方法</li>
      <li>10時間の連続使用が可能</li>
    </ol>
  </li>
  <li>使用上の注意</li>
</ol>

ol {
  counter-reset: item;
}

li{
  display: block;
}

li:before {
  content: counters(item, ".") " ";
  counter-increment: item;
}

リストデザインのカスタマイズ

リストデザインの変更を方法を目的ごとに確認していこう。

リスト項目のインデント指定方法

リスト項目のインデントの変更の仕方を確認しよう。

インデントとはリストのマーカーからアイテムの始まりまでの間隔の事だ。

li {
  padding-left: 15px;
}

リスト項目の間隔を調整する

次にリスト項目同士の間隔の調整方法を確認したい。

リスト項目の間隔を調整したい場合はpaddingを使用するのがいいだろう。階層の上位にある項目の間隔を大きめにするとバランスが良く感じられるだろう。

li {
  padding-top: 15px;
}

ol > li > ol > li {
  padding-top: 5px;
}

リスト項目のテキストデザイン

リスト項目のテキストのデザインを変更したい場合は、用途に応じて以下のような要領でCSSプロパティを指定する。

ol > li {
  font-family: serif;
  font-style: italic;
  font-size: 18px;
}