さようなら「1」「2」「3」！CSSで「1.1」「1.2」形式の番号付きリストを作る方法

2024-05-19

HTMLとCSSで番号付きリストを「1.1」「1.2」「1.3」形式にする方法

HTML

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

CSS

ol {
  counter-reset: item; /* カウンター変数 "item" を初期化 */
}

li {
  list-style-type: none; /* デフォルトのリストマーカーを非表示 */
  counter-increment: item; /* カウンター変数 "item" を1ずつ加算 */
  padding-left: 2em; /* 番号と内容の間にスペースを入れる */
}

li::before {
  content: counter(item) "."; /* カウンター変数の値と "." を結合して表示 */
}

解説

counter-reset: このプロパティは、カウンター変数を定義し、初期値を設定します。上記の例では、item という名前のカウンター変数を定義し、初期値を 0 に設定しています。
list-style-type: このプロパティは、リストマーカーの種類を指定します。none を指定することで、デフォルトの丸いマーカーを非表示にします。
counter-increment: このプロパティは、リストアイテムごとにカウンター変数の値をどのように加算していくのかを指定します。上記の例では、item 変数を 1 ずつ加算しています。
padding-left: このプロパティは、要素の左側の余白を設定します。上記の例では、2em の余白を設定することで、番号と内容の間にスペースを入れています。
content: このプロパティは、擬似要素の内容を指定します。::before 擬似要素は、要素の前にコンテンツを挿入するために使用されます。上記の例では、counter(item) 関数を使用して item 変数の値を取得し、それにドット (.) を結合してコンテンツとして設定しています。

このCSSを適用すると、番号付きリストは以下のようになります。

1.1 項目1
1.2 項目2
1.3 項目3

補足

上記の例では、小数点以下の桁数を 1 桁にしていますが、.## のようにフォーマット文字列を変更することで、任意の桁数に設定することができます。
他の種類のリスト (無順序リストなど) にも同様の手法を適用することができます。
より複雑な番号付け (例: 1.1.1, 1.1.2, 1.2.1) を実現するには、入れ子になったリストとCSSの組み合わせが必要となります。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>番号付きリスト</title>
  <style>
    ol {
      counter-reset: item;
    }

    li {
      list-style-type: none;
      counter-increment: item;
      padding-left: 2em;
    }

    li::before {
      content: counter(item) ".";
    }
  </style>
</head>
<body>
  <ol>
    <li>項目1</li>
    <li>項目2</li>
    <li>項目3</li>
  </ol>
</body>
</html>

ol {
  counter-reset: item; /* カウンター変数 "item" を初期化 */
}

li {
  list-style-type: none; /* デフォルトのリストマーカーを非表示 */
  counter-increment: item; /* カウンター変数 "item" を1ずつ加算 */
  padding-left: 2em; /* 番号と内容の間にスペースを入れる */
}

li::before {
  content: counter(item) "."; /* カウンター変数の値と "." を結合して表示 */
}

説明

このコードは、以下の要素で構成されています。

HTML: この部分では、番号付きリスト (<ol>) とその中のリストアイテム (<li>) を定義しています。
CSS: この部分では、リストアイテムのスタイルを定義しています。counter-reset プロパティを使用してカウンター変数を初期化し、list-style-type プロパティを使用してデフォルトのリストマーカーを非表示にします。また、counter-increment プロパティを使用してリストアイテムごとにカウンター変数を1ずつ加算し、padding-left プロパティを使用して番号と内容の間にスペースを入れます。最後に、::before 擬似要素を使用して、カウンター変数の値とドット (.) を結合してコンテンツとして設定します。

1.1 項目1
1.2 項目2
1.3 項目3

HTMLとCSSで番号付きリストを「1.1」「1.2」「1.3」形式にする方法：代替方法

方法 1：属性と擬似要素を使用する

この方法は、CSSカウンターを使用せずに、属性と擬勢要素を使用して番号を生成します。

<ol data-start="1">
  <li>項目1</li>
  <li>項目2</li>
  <li>項目3</li>
</ol>

ol li {
  list-style-type: none;
  padding-left: 2em;
}

ol li::before {
  content: attr(data-start) ".";
  counter-increment: start;
  display: inline-block;
  margin-right: 1em;
}

ol[data-start] {
  counter-reset: start 0;
}

data-start 属性: この属性を使用して、リストの開始番号を指定します。
::before 擬似要素: この擬似要素を使用して、リストアイテムの前に番号を表示します。
counter-increment プロパティ: このプロパティを使用して、リストアイテムごとに start カウンター変数を 1 ずつ加算します。
display: inline-block プロパティ: このプロパティを使用して、::before 擬似要素をインラインブロック要素として表示します。
margin-right プロパティ: このプロパティを使用して、番号と内容の間にスペースを入れます。

この方法は、JavaScriptを使用して、リストアイテムごとに番号を動的に生成します。

<ol id="myList">
  <li>項目1</li>
  <li>項目2</li>
  <li>項目3</li>
</ol>

JavaScript

const list = document.getElementById('myList');
const items = list.getElementsByTagName('li');

for (let i = 0; i < items.length; i++) {
  const item = items[i];
  const number = i + 1;
  const dot = '.';
  const text = number + dot;

  const span = document.createElement('span');
  span.textContent = text;

  item.insertBefore(span, item.firstChild);
}

getElementById: このメソッドを使用して、id 属性を持つ要素を取得します。
length プロパティ: このプロパティを使用して、要素のリストの長さを取得します。
createElement: このメソッドを使用して、新しいHTML要素を作成します。
textContent: このプロパティを使用して、要素のテキストコンテンツを設定します。
insertBefore: このメソッドを使用して、新しい要素を既存の要素の前に挿入します。

この方法は、より柔軟な番号付け (例: 1.1.1, 1.1.2, 1.2.1) を実現するのに役立ちます。

上記以外にも、様々な方法でHTMLとCSSで番号付きリストを「1.1」「1.2」「1.3」形式にすることができます。それぞれの方法には長所と短所があるので、自分のニーズに合った方法を選択することが重要です。

html css