HTML・CSSで丸数字を作る方法｜連番・特殊文字との使い分けを初心者向けに解説

手順やランキングの先頭に、丸で囲んだ「1」「2」「3」を表示したいことがあります。丸数字の記号をそのまま入力する方法もありますが、色や大きさを自由に変えたい場合はHTMLとCSSで作るのがおすすめです。

基本は、数字を入れたspan要素にaspect-ratio: 1とborder-radius: 50%を指定し、Gridで中央配置します。この記事では、1桁から3桁まで使える丸数字、連番を自動で付ける方法、丸数字記号との使い分けを解説します。

HTMLとCSSで丸数字を作る基本

まずは、数字の「1」を入れたspan要素を用意します。丸数字は文章や見出しの横へ置くことが多いため、汎用的なspanを使います。

<span class="circle-number">1</span>

この時点では、普通の数字が表示されるだけです。次のCSSを追加すると、正方形の領域を丸くし、数字を中央へ配置できます。

.circle-number {
  display: inline-grid;
  place-items: center;
  inline-size: 2.5rem;
  aspect-ratio: 1;
  border-radius: 50%;
  color: #ffffff;
  background: #2563eb;
  font-weight: 700;
  line-height: 1;
}

inline-sizeは横書きの場合の幅、aspect-ratio: 1は幅と高さを1対1にする指定です。正方形にborder-radius: 50%を指定すると、完全な円になります。

display: inline-gridにすると、文章の途中へ置けるインライン要素の性質を保ちながら、内部をGridとして扱えます。place-items: centerで数字を上下左右の中央へ配置します。

複数の丸数字を並べる

同じクラスを付ければ、1桁だけでなく2桁や3桁にも使えます。数字ごとに別のCSSを書く必要はありません。

<p class="number-sample">
  <span class="circle-number">1</span>
  <span class="circle-number">12</span>
  <span class="circle-number">100</span>
</p>

.number-sample {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.circle-number {
  flex: 0 0 auto;
  font-size: 0.9rem;
}

flex: 0 0 autoを追加すると、横幅が狭い場所でも丸数字が押しつぶされにくくなります。3桁以上を頻繁に使う場合は、円の直径を少し大きくするか、フォントサイズを小さく調整してください。

丸数字の色と大きさを変える

共通クラスへ基本の形を書き、追加クラスで色や大きさだけを変更すると使い回しやすくなります。

<span class="circle-number circle-number--red">1</span>
<span class="circle-number circle-number--green">2</span>
<span class="circle-number circle-number--large">3</span>

.circle-number--red {
  background: #dc2626;
}

.circle-number--green {
  background: #047857;
}

.circle-number--large {
  inline-size: 3.5rem;
  font-size: 1.25rem;
}

背景色と文字色には十分なコントラストを付けます。色だけで手順の違いを伝えず、数字や見出しの文字も一緒に表示してください。

手順リストへ丸数字を付ける

複数の手順を表すなら、divを並べるよりol（順序付きリスト）を使います。HTMLとして手順の順番が伝わり、項目を追加したときも番号を管理しやすくなります。

<ol class="steps" role="list">
  <li>
    <div>
      <h3>HTMLファイルを作る</h3>
      <p>index.htmlを用意します。</p>
    </div>
  </li>
  <li>
    <div>
      <h3>CSSを追加する</h3>
      <p>style.cssで見た目を整えます。</p>
    </div>
  </li>
  <li>
    <div>
      <h3>ブラウザで確認する</h3>
      <p>保存後にページを再読み込みします。</p>
    </div>
  </li>
</ol>

CSSカウンターを使うと、HTMLへ数字を直接書かなくても、項目の順番に合わせて連番を表示できます。

.steps {
  counter-reset: step;
  display: grid;
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.steps li {
  counter-increment: step;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.steps li::before {
  content: counter(step);
  display: grid;
  place-items: center;
  inline-size: 2.5rem;
  aspect-ratio: 1;
  border-radius: 50%;
  color: #ffffff;
  background: #2563eb;
  font-weight: 700;
  line-height: 1;
}

.steps h3,
.steps p {
  margin-top: 0;
}

counter-resetでカウンターを用意し、各liでcounter-incrementを使って1ずつ増やします。content: counter(step)が現在の番号を表示します。

list-style: noneで標準の番号を非表示にしているため、role="list"も付けています。見た目の丸数字は疑似要素で作りつつ、HTMLでは順序付きリストとして手順を表します。

見出しの横へ丸数字を置く

見出しと丸数字を横に並べる場合は、見出しを囲む要素へFlexboxを指定します。丸数字が装飾で、見出し本文に「手順1」などの意味が含まれている場合はaria-hidden="true"で重複読み上げを避けられます。

<div class="heading-with-number">
  <span class="circle-number" aria-hidden="true">1</span>
  <h2>手順1：ファイルを作成する</h2>
</div>

.heading-with-number {
  display: flex;
  gap: 12px;
  align-items: center;
}

.heading-with-number h2 {
  margin: 0;
}

見出しの文字に番号が含まれていないなら、丸数字を隠す必要はありません。見た目だけでなく、数字が内容理解に必要かどうかで判断します。

丸数字の特殊文字を使う方法

装飾が不要なら、「①」「②」「③」のようなUnicodeの丸数字をHTMLへ直接入力できます。数値文字参照を使う場合は、次のように書きます。

<p>① ファイルを作成する</p>
<p>&#9313; CSSを追加する</p>
<p>&#9314; ブラウザで確認する</p>

①が①、②が②、③が③です。直接入力しても文字参照を使っても、ブラウザには同じ記号が表示されます。

特殊文字は短い文章へ手軽に使えますが、背景色と文字色を別々に変えたり、好きな数字へ無制限に対応したりはできません。デザインを統一したい手順や目次には、CSSで作る方法が向いています。

丸数字を使う場面

• 操作手順や申し込みの流れ
• ランキングやおすすめ順
• 見出しや目次の番号
• 料金プランや特徴の比較
• 地図や画像上の注釈番号

順番が意味を持つ内容にはolを使い、単なる装飾やラベルならspanを使います。HTML要素は、丸い見た目ではなく内容の意味で選んでください。

丸数字が楕円になるときの確認ポイント

• 幅と高さが同じ比率になっているか
• aspect-ratio: 1が上書きされていないか
• Flexboxの中で丸数字が縮んでいないか
• 左右だけ異なるpaddingを付けていないか
• 長い数字に対して円の直径が小さすぎないか
• border-radiusが50%になっているか

特にFlexbox内では、利用できる幅が不足すると要素が縮む場合があります。flex: 0 0 autoを指定し、円の形を保てるか確認してください。

まとめ

HTMLとCSSで丸数字を作るときは、数字を入れたspanにaspect-ratio: 1、border-radius: 50%、place-items: centerを指定します。色や大きさを自由に変えられ、2桁以上の数字にも対応できます。

複数の手順にはolとCSSカウンター、短い文章へ手軽に入れるだけなら①などの特殊文字が便利です。見た目だけでなく、順番の意味と読み上げ方も考えて方法を選びましょう。