【CSS】番号付きリスト（ol）の数字デザインをCSSで自由に変更する方法

番号付きリストは、手順説明やランキング、注意事項の整理などで頻繁に使われるHTML要素です。しかし、標準の ol はブラウザ依存の数字デザインになるため、デザインに統一感を持たせたい場合や、UIとして見栄えを整えたい場合には物足りなく感じることがあります。CSSを使えば、番号の表示方法や見た目を自由に制御でき、デザイン性と可読性を両立したリスト表現が可能になります。本記事では、ol の数字デザインをCSSで柔軟に変更するための実践的な方法を解説します。

olとliの基本構造を理解する

ol はリスト全体の構造を定義し、実際の番号表示は li 要素に付随するマーカーとして描画されています。この番号は list-style-type によって制御されており、CSSで上書きしない限り、ブラウザのデフォルト表現が使われます。デザインを自由に変更するには、この「マーカー」をどのように扱うかが重要になります。

list-style-typeで番号形式を変更する

最も基本的な方法は list-style-type を指定することです。これにより、数字、ローマ数字、アルファベットなど、番号の種類を簡単に変更できます。

ol {
  list-style-type: decimal-leading-zero;
}

この指定では 01、02、03 のようにゼロ埋めされた番号が表示されます。デザイン要件が軽微な場合は、この方法だけでも十分なケースがあります。

list-style-positionによる配置調整

番号の位置は list-style-position で制御できます。outside は番号を本文の外側に、inside は本文と同じ行ボックス内に配置します。inside を指定すると、複数行になった際の折り返し位置が変わるため、可読性に影響を与える点に注意が必要です。

ol {
  list-style-position: inside;
}

擬似要素を使って完全にデザインする方法

より自由度の高いデザインを行う場合は、デフォルトの番号表示を無効化し、擬似要素で番号を生成する方法が有効です。この方法では、背景色や形状、フォントサイズなどを細かく制御できます。

ol {
  list-style: none;
  counter-reset: step;
}

ol li {
  counter-increment: step;
  position: relative;
  padding-left: 2em;
}

ol li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0;
  width: 1.5em;
  height: 1.5em;
  background: #333;
  color: #fff;
  border-radius: 50%;
  text-align: center;
  line-height: 1.5em;
}

この例では、数字を丸い背景付きのバッジとして表示しています。UI的な手順リストやステップ表示に適した表現です。

カウンターを使った柔軟な番号制御

CSSカウンターを使うことで、番号の開始位置や表示形式を柔軟に制御できます。たとえば、途中から番号を振りたい場合や、章番号のような表現も可能です。

ol {
  counter-reset: section 3;
}

ol li::before {
  content: counter(section) ".";
}

この指定では、番号が 4 から始まるリストになります。HTML側を変更せずに制御できる点がメリットです。

ネストされたolのデザイン調整

ol が入れ子になった場合、それぞれで異なるカウンターを使うことで、階層構造を視覚的に分かりやすくできます。親子で番号形式や装飾を変えることで、情報の整理度が向上します。

ol {
  counter-reset: level1;
}

ol > li {
  counter-increment: level1;
}

ol > li::before {
  content: counter(level1) ".";
}

ol ol {
  counter-reset: level2;
}

ol ol > li::before {
  content: counter(level1) "-" counter(level2);
}

レスポンシブと可読性への配慮

数字を装飾しすぎると、スマートフォンなどの狭い画面では可読性が低下することがあります。モバイルでは装飾を簡略化したり、サイズを小さくするなど、メディアクエリでの調整が有効です。

@media (max-width: 600px) {
  ol li::before {
    font-size: 0.8em;
  }
}

実務での設計指針

番号付きリストのデザインは、視覚的なアクセントとして有効ですが、情報の優先順位を邪魔しないことが前提です。単なる装飾目的で複雑なデザインを施すよりも、意味のある場面に限定して使うことで、UI全体の品質が向上します。

まとめ

ol の数字デザインは、list-style 系プロパティによる簡易調整から、CSSカウンターと擬似要素を使った完全カスタマイズまで、目的に応じた方法を選択できます。HTML構造を変えずに表現を制御できる点は、保守性の高い設計につながります。可読性とデザイン性のバランスを意識しながら、適切な手法を選ぶことが重要です。