【HTML】olとulの違い、マーカーのカスタマイズと配置方法

HTMLには、リストを作成するためのタグとして<ol>と<ul>があります。
それぞれの違いに加えて、リストのマーカーをカスタマイズする方法や、マーカーの配置方法について解説します。

<ol>と<ul>の違い

<ol>タグと<ul>タグの違いは、リスト項目が番号付きかどうかです。以下にその違いを簡単にまとめます。

• <ol>（Ordered List、順序付きリスト）: 各アイテムが番号付きで表示されます。リストの順序が重要な場合に使用します。
• <ul>（Unordered List、順序なしリスト）: 各アイテムが記号（通常は点）で表示されます。リストの順序が重要でない場合に使用します。

一般的なlist-style-typeの値

HTMLのリストで使用できる一般的なlist-style-typeの値とその例を以下に示します。

• disc: デフォルトの丸い点（●）をマーカーとして表示します。
  例: ●
• circle: 空心の円（◦）をマーカーとして表示します。
  例: ◦
• square: 四角い点（■）をマーカーとして表示します。
  例: ■
• decimal: 順序付きリスト（<ol>）のデフォルト値で、アラビア数字（1, 2, 3, …）を表示します。
  例: 1, 2, 3,…
• decimal-leading-zero: アラビア数字に先頭ゼロを付けた形（01, 02, 03, …）で表示します。
  例: 01, 02, 03,…
• lower-roman: 小文字のローマ数字（i, ii, iii, …）を使用します。
  例: i, ii, iii,…
• upper-roman: 大文字のローマ数字（I, II, III, …）を使用します。
  例: I, II, III,…
• lower-alpha: 小文字の英字（a, b, c, …）を使用します。
  例: a, b, c,…
• upper-alpha: 大文字の英字（A, B, C, …）を使用します。
  例: A, B, C,…
• none: リスト項目の前にマーカーを表示しません。

リストマーカーの配置方法

リストマーカーの配置には2つのオプションがあります。

• outside: デフォルトの設定で、リストマーカーはリスト項目の外側に配置されます。リスト項目が折り返された場合、テキストはマーカーの左に揃います。
• inside: リストマーカーはリスト項目の内側に配置され、折り返されたテキストはマーカーの下に揃います。

以下に、それぞれの配置の例を示します。

マーカーを外側に配置 (outside)

ul.outside-marker {
    list-style-position: outside;
}

• 外側に配置されたリスト項目です。この項目が長い場合、テキストはマーカーの外側に揃います。外側に配置されたリスト項目です。この項目が長い場合、テキストはマーカーの外側に揃います。
• 外側に配置されたリスト項目です。この項目が長い場合、テキストはマーカーの外側に揃います。外側に配置されたリスト項目です。この項目が長い場合、テキストはマーカーの外側に揃います。

マーカーを内側に配置 (inside)

ul.inside-marker {
    list-style-position: inside;
}

• 内側に配置されたリスト項目です。この項目が長い場合、テキストはマーカーの下に揃います。内側に配置されたリスト項目です。この項目が長い場合、テキストはマーカーの下に揃います。
• 内側に配置されたリスト項目です。この項目が長い場合、テキストはマーカーの下に揃います。内側に配置されたリスト項目です。この項目が長い場合、テキストはマーカーの下に揃います。

マーカーのカスタマイズ方法

デフォルトのマーカーを変更して、任意の文字やシンボルをマーカーとして使用することも可能です。以下にその方法を示します。

リストマーカーを任意の文字に変更

例えば、リストのマーカーを星印「★」に変更するには、以下のようにCSSを設定します。

ul.custom-symbol {
    list-style-type: none;
}
ul.custom-symbol li::before {
    content: "★ ";
    color: green;
    font-weight: bold;
}

HTMLコード:

<ul class="custom-symbol">
    <li>カスタムマーカーを使用した項目1</li>
    <li>カスタムマーカーを使用した項目2</li>
    <li>カスタムマーカーを使用した項目3</li>
</ul>

• カスタムマーカーを使用した項目1
• カスタムマーカーを使用した項目2
• カスタムマーカーを使用した項目3

まとめ

<ol>と<ul>を使い分けることで、内容に応じたリストを作成できます。
さらに、CSSを活用してリストマーカーのスタイルや配置を自由にカスタマイズし、リストの見た目を向上させることが可能です。
リストのデザインを工夫することで、情報を視覚的に整理し、読み手にとってわかりやすいコンテンツを提供できます。