HTML

【HTML】でリスト作成｜ul・ol・liタグの使い方まとめ

HTMLでリストを作成する際には、ul、ol、li（list item）タグを使用します。

これらのタグを正しく組み合わせることで、見出しや順序が付いたリストを作成することができます。

以下では、それぞれのタグの使い方と具体的な例を示します。

ulタグとは？

ulタグはunordered listの略で、順序のないリスト（バレットポイント）を作成するために使用されます。

基本的にulタグの中にliタグを配置し、リストの各項目を表現します。

<ul>
  <li>項目1</li>
  <li>項目2</li>
  <li>項目3</li>
</ul>

上記のように、記述すると下記のような結果になります。

  • 項目1
  • 項目2
  • 項目3

olタグとは？

olタグはordered listの略で、順序のあるリスト（番号付きリスト）を作成するために使用されます。

olタグの中にliタグを配置し、リストの各項目を表現します。

<ol>
  <li>項目1</li>
  <li>項目2</li>
  <li>項目3</li>
</ol>

上記のように、記述すると下記のような結果になります。

  1. 項目1
  2. 項目2
  3. 項目3

liタグとは？

liはlist Itemの略でリストの項目を表します。

基本的にulタグ、olタグとセットで使用されます。

入れ子のリスト:

ulタグやolタグは入れ子にすることもできます。

これにより、階層的なリストを作成することができます。

<ul>
  <li>項目1</li>
  <li>項目2
    <ul>
      <li>項目2-1</li>
      <li>項目2-2</li>
    </ul>
  </li>
  <li>項目3</li>
</ul>

上記のように、記述すると下記のような結果になります

  • 項目1
  • 項目2
    • 項目2-1
    • 項目2-2
  • 項目3

type属性


type属性は、ulタグやolタグで使用される属性であり、リストのスタイルや番号付けの形式を指定するために使われます。

以下によく使用されるtype属性の値とその効果について説明します。

ulタグのtype属性

type属性は、ulタグで使用される場合にバレットポイントのスタイルを指定します。

よく使用される値は以下の通りです。

  • disc（デフォルト）: 黒丸
  • circle: 空の丸
  • square: 四角
  • none: リストマーカーを非表示にする

olタグのtype属性

type属性は、olタグで使用される場合に番号付けの形式を指定します。

よく使用される値は以下の通りです。

  • decimal（デフォルト）: 10進数（1, 2, 3, ...）
  • decimal-leading-zero: 先頭に0を付けた10進数（01, 02, 03, ...）
  • lower-roman: 小文字のローマ数字（i, ii, iii, ...）
  • upper-roman: 大文字のローマ数字（I, II, III, ...）
  • lower-alpha: 小文字のアルファベット（a, b, c, ...）
  • upper-alpha: 大文字のアルファベット（A, B, C, ...）

type属性を使用することで、特定のスタイルや番号付けの形式をリストに適用することができます。

また、一部のブラウザではtype属性の効果が限定的な場合もありますので、CSSを使用してより高度なスタイリングや番号付けを行うこともできます。

まとめ

以上が、HTMLのul・ol・liタグの基本的な使い方に関するまとめです。

これらのタグと属性を組み合わせて、見出しや順序を持つリストを作成することができます。

-HTML