デザインの幅が広がる！HTMLとCSSでできる順序付きリストの高度なカスタマイズ

HTMLとCSSで順序付きリストの番号をカスタマイズする方法

HTMLの属性を使う

HTMLの <ol> タグには、番号の種類や開始番号を設定する属性があります。

番号の種類

• type 属性: 番号の種類を指定します。
  • 1: デフォルトの数字
  • a: 英小文字
  • i: 小文字のローマ数字

開始番号

• start 属性: リストの開始番号を指定します。

例:

<ol type="A" start="5">
  <li>項目1</li>
  <li>項目2</li>
  <li>項目3</li>
</ol>

このコードは、英大文字で5から始まる順序付きリストを作成します。

CSSを使って、番号のスタイルをより細かく設定することができます。

• list-style-type プロパティ: 番号の種類を指定します。
  • decimal: デフォルトの数字
  • lower-alpha: 英小文字
  • lower-roman: 小文字のローマ数字

• list-style-position: 番号の位置を指定します。
• list-style-image: 番号の代わりに画像を使用します。

ol {
  list-style-type: lower-roman;
  list-style-position: inside;
}

このコードは、小文字のローマ数字をリスト項目の左側に表示します。

疑似要素を使う

CSSの疑似要素を使って、番号をより自由にカスタマイズすることができます。

ol li::before {
  content: "【" counter(item) "】";
}

このコードは、番号の前に角括弧とカウンターを挿入します。

HTMLとCSSを使って、順序付きリストの番号を様々な方法でカスタマイズすることができます。

上記以外にも、様々な方法がありますので、ぜひ試してみてください。

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

CSS

/* 番号の種類を変更 */
ol {
  list-style-type: lower-alpha;
}

/* 番号の位置を変更 */
ol li {
  list-style-position: inside;
}

/* 番号の前に文字を追加 */
ol li::before {
  content: "● ";
}

/* 番号の色を変更 */
ol li::marker {
  color: red;
}

結果

• 番号は英小文字になる
• 番号はリスト項目の左側に表示される
• 番号の前に●が追加される
• 番号は赤色になる

例：

• 番号を画像に変更する
• 番号を太字にする
• 番号のサイズを変更する

これらのカスタマイズも可能です。

順序付きリストの番号をカスタマイズするその他の方法

JavaScriptを使って、番号を動的に生成したり、変更したりすることができます。

const listItems = document.querySelectorAll("ol li");

for (let i = 0; i < listItems.length; i++) {
  listItems[i].textContent = `${i + 1}. `;
}

このコードは、リスト項目の番号を1から始まる数字に置き換えます。

ライブラリを使う

BootstrapやBulmaなどのCSSフレームワークには、順序付きリストの番号をカスタマイズするためのユーティリティクラスが含まれています。

<ol class="list-unstyled">
  <li>項目1</li>
  <li>項目2</li>
  <li>項目3</li>
</ol>

.list-unstyled {
  list-style: none;
}

.list-unstyled li::before {
  content: "● ";
}

このコードは、Bootstrapを使って番号なしのリストを作成し、番号の前に●を追加します。

画像を使う

番号の代わりに画像を使用することができます。

<ol>
  <li><img src="img/1.png" alt="1"></li>
  <li><img src="img/2.png" alt="2"></li>
  <li><img src="img/3.png" alt="3"></li>
</ol>

このコードは、1から3までの数字の画像を番号として使用します。

順序付きリストの番号をカスタマイズする方法は様々です。