CSSカウンターで作る番号デザイン集｜丸数字・ローマ数字・英字・STEPラベルの実装例

CSSカウンターで番号をデザインする

CSSカウンターは、番号を自動で付与するだけでなく、その番号を「デザイン要素」として活用できる便利な仕組みです。
丸数字、ローマ数字、英字形式、STEPラベル、カード風など、デザイン性の高い番号表現をCSSだけで実現できます。
今回は、初心者でも使いやすく実案件でも役立つ番号デザインの実装例をまとめて紹介します。

実装例１：基本の丸数字デザイン

シンプルで使いやすい丸数字デザイン。手順リストや特徴紹介、サービス説明など幅広く活用できます。

HTML

      <ul class="circle-list">
        <li>CSSカウンターの基本を理解する</li>
        <li>カウンター用のクラス名を決める</li>
        <li>デザイン（色・サイズ）を調整する</li>
        <li>サイト全体のトーンに合わせる</li>
      </ul>

CSS

  .circle-list {
    counter-reset: item;
  }
  .circle-list li {
    counter-increment: item;
    list-style: none;
    margin-bottom: 0.8em;
  }
  .circle-list li::before {
    content: counter(item);
    display: inline-block;
    width: 1.8em;
    height: 1.8em;
    line-height: 1.8em;
    text-align: center;
    border-radius: 50%;
    background: #007acc;
    color: #fff;
    font-weight: bold;
    margin-right: 0.6em;
  }

背景色やサイズを変えるだけで全体の印象を大きく変えることができます。
丸数字は最も汎用性の高い番号デザインと言えます。

実装例２：ローマ数字・英字スタイル

番号形式を変えるだけで、上品・クラシカル・フォーマルな印象を演出できるデザインです。
CSSカウンターなら、上位番号形式も簡単に実現できます。

HTML

      <p><strong>ローマ数字（upper-roman）</strong></p>
      <ul class="roman-list">
        <li>要件の整理</li>
        <li>デザイン方針の決定</li>
        <li>CSSの作成</li>
        <li>動作検証</li>
      </ul>

      <p style="margin-top: 1.2rem;"><strong>英字（upper-alpha）</strong></p>
      <ul class="alpha-list">
        <li>配色案の作成</li>
        <li>構造デザインの検討</li>
        <li>要素間余白の調整</li>
        <li>最終チェック</li>
      </ul>

CSS

  /* ローマ数字 */
  .roman-list {
    counter-reset: num;
  }
  .roman-list li {
    counter-increment: num;
    list-style: none;
  }
  .roman-list li::before {
    content: counter(num, upper-roman) ". ";
    font-weight: bold;
    color: #444;
  }

  /* 英字（A, B, C） */
  .alpha-list {
    counter-reset: alpha;
  }
  .alpha-list li {
    counter-increment: alpha;
    list-style: none;
  }
  .alpha-list li::before {
    content: counter(alpha, upper-alpha) ") ";
    font-weight: bold;
    color: #333;
  }

upper-roman / lower-roman、upper-alpha / lower-alpha の切替で簡単に形式変更できます。

実装例３：STEPラベルデザイン（ラウンド型）

手順説明やチュートリアルなどで定番の「STEP1」「STEP2」形式のデザイン。
丸とラベルのバランスが崩れないよう、見切れ対策済みの修正版です。

HTML

      <ol class="steps">
        <li><span class="step-text">ゴールを明確にする</span></li>
        <li><span class="step-text">必要な要素を洗い出す</span></li>
        <li><span class="step-text">番号スタイルを選ぶ</span></li>
        <li><span class="step-text">実際にCSSを適用して確認する</span></li>
      </ol>

CSS

  .steps {
    counter-reset: step;
    padding-left: 0;
    margin: 0;
  }

  .steps li {
    counter-increment: step;
    list-style: none;
    margin-bottom: 1.4rem;
    position: relative;
    padding-left: 3.8em;
  }

  .steps li::before {
    content: "STEP" counter(step);
    position: absolute;
    left: 0;
    top: 0;
    width: 3.2em;
    height: 3.2em;
    line-height: 3.2em;
    text-align: center;
    background: linear-gradient(135deg, #007acc, #00bcd4);
    color: #fff;
    font-weight: bold;
    border-radius: 50%;
    box-shadow: 0 2px 6px rgba(0,0,0,0.12);
    font-size: 0.78rem;
    letter-spacing: 0.03em;
    overflow: hidden;
  }

  @media (max-width: 600px) {
    .steps li {
      padding-left: 3.5em;
    }
    .steps li::before {
      width: 3em;
      height: 3em;
      line-height: 3em;
      font-size: 0.74rem;
    }
  }

グラデーション＋丸＋影の組み合わせで視認性が高く、LPやサービス紹介にもよく合います。

実装例４：カード風番号デザイン

番号をカードのアクセントとして表示するタイプ。
特徴紹介、サービス説明、まとめの3つ／5つなどの構造にとても相性がよいスタイルです。

HTML

      <ul class="card-list">
        <li>
          <div class="card-list-title">見出しのメリハリ</div>
          <div class="card-list-body">太字の見出し＋落ち着いた本文で読みやすさ向上。</div>
        </li>
        <li>
          <div class="card-list-title">余白の確保</div>
          <div class="card-list-body">窮屈さを避け、情報が整理されて見える。</div>
        </li>
        <li>
          <div class="card-list-title">ブランドカラーと統一感</div>
          <div class="card-list-body">番号バッジの色をサイトの基調色に合わせると一体感UP。</div>
        </li>
      </ul>

CSS

  .card-list {
    counter-reset: cnum;
  }
  .card-list li {
    counter-increment: cnum;
    background: #f9f9f9;
    border: 1px solid #ddd;
    padding: 1rem 1rem 1rem;
    margin-bottom: 0.9rem;
    border-radius: 10px;
    position: relative;
    list-style: none;
  }
  .card-list li::before {
    content: counter(cnum);
    position: absolute;
    left: -0.8em;
    top: -0.8em;
    background: #007acc;
    color: #fff;
    width: 1.9em;
    height: 1.9em;
    line-height: 1.9em;
    text-align: center;
    border-radius: 50%;
    font-weight: bold;
    box-shadow: 0 2px 4px rgba(0,0,0,0.16);
  }

カード内のタイトル・本文を組み合わせることで情報が整理され、視認性の高いリストを作れます。

デザインに迷ったときのポイント

コントラストを確保（背景色と文字色）
サイズ・余白のバランス：数字が小さすぎないように
丸やラベルの一貫性：リスト全体の統一感を重視
サイトのトーンに合わせる：ブランドカラーとの整合性

番号は「情報整理のためのデザイン」です。強調しすぎず、邪魔にならず、読みやすく整理されていることが重要です。

まとめ：CSSカウンターで表現の幅を広げよう

CSSカウンターを使えば、丸数字・ローマ数字・英字・STEPラベル・カード風など、デザイン性の高い番号表現をCSSだけで作れます。
また、通し番号の自動管理により、コピペ時の番号修正忘れや降り間違いを防げるのも大きなメリットです。
サイトのデザインや内容に合わせて、自分らしい番号デザインをぜひ活用してみてください。