HTML、CSS、CSS Shapes を駆使して数字をスタイリッシュに囲む

2024-05-14

HTML、CSS、CSS Shapes を使って数字を円で囲む方法

HTML

まず、囲みたい数字を含む HTML 要素を用意します。例えば、以下のように span 要素を使って数字 "1" を記述します。

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

CSS

次に、CSS を使って、数字を囲む円を定義します。以下は、円を生成するための基本的な CSS コードです。

.number {
  position: relative; /* 数字を他の要素と位置関係を独立させる */
  display: inline-block; /* 数字をインライン要素として表示 */
}

.number::before {
  content: ''; /* 疑似要素を作成して円を生成 */
  display: block; /* 円をブロック要素として表示 */
  width: 50px; /* 円の直径 */
  height: 50px; /* 円の直径 */
  border-radius: 50%; /* 円形にする */
  background-color: #f00; /* 円の色 */
  position: absolute; /* 絶対配置にして数字の上に重ねる */
  top: 50%; /* 垂直方向に中央揃え */
  left: 50%; /* 水平方向に中央揃え */
  transform: translate(-50%, -50%); /* 中央配置を調整 */
}

この CSS コードは、以下の設定を行います。

.number 要素を position: relative に設定することで、他の要素と位置関係を独立させます。
.number 要素を display: inline-block に設定することで、インライン要素として表示し、他の要素と並ぶようにします。
::before 疑似要素を使って、円を生成します。
円の幅と高さを 50px に設定して、直径 50px の円を作ります。
border-radius: 50% を設定して、円形にします。
円の色を #f00 (赤) に設定します。
position: absolute を設定して、数字の上に円を重ねます。
top: 50%; left: 50%; を設定して、円を垂直方向と水平方向に中央揃えします。
transform: translate(-50%, -50%) を設定して、中央配置を微調整します。

カスタマイズ

上記のコードはあくまでも基本的な例です。円の色、大きさ、位置などを自由にカスタマイズすることができます。例えば、以下のように変更することで、緑色の円を数字の右側に配置することができます。

.number::before {
  background-color: #0f0; /* 緑色 */
  top: 0; /* 上端に配置 */
  right: 0; /* 右端に配置 */
  transform: translate(0, -50%); /* 中央配置を調整 */
}

さらに、CSS Shapes モジュールを利用することで、より複雑な形状の囲みを作ることもできます。例えば、以下のように変更することで、数字を三角形の中に囲むことができます。

.number::before {
  content: '';
  display: block;
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid #f00; /* 三角形の色 */
  position: absolute;
  top: 0;
  left: 0;
  transform: rotate(-45deg); /* 三角形を回転 */
}

補足

上記のコードはあくまで一例であり、状況に合わせて調整する必要があります。
円形以外の形状を生成するには、様々な 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>
    .number {
      position: relative;
      display: inline-block;
    }

    .number::before {
      content: '';
      display: block;
      width: 50px;
      height: 50px;
      border-radius: 50%;
      background-color: #f00;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
  </style>
</head>
<body>
  <span class="number">1</span>
  <span class="number">2</span>
  <span class="number">3</span>
</body>
</html>

.number {
  position: relative;
  display: inline-block;
}

.number::before {
  content: '';
  display: block;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: #f00;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

このコードを実行すると、以下のようになります。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>数字を円で囲む</title>
  <style>
    .number {
      position: relative;
      display: inline-block;
    }

    .number::before {
      content: '';
      display: block;
      width: 50px;
      height: 50px;
      border-radius: 50%;
      background-color: #0f0;
      position: absolute;
      top: 0;
      right: 0;
      transform: translate(0, -50%);
    }
  </style>
</head>
<body>
  <span class="number">1</span>
  <span class="number">2</span>
  <span class="number">3</span>
</body>
</html>

.number {
  position: relative;
  display: inline-block;
}

.number::before {
  content: '';
  display: block;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: #0f0;
  position: absolute;
  top: 0;
  right: 0;
  transform: translate(0, -50%);
}

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>数字を円で囲む</title

数字を円で囲む：その他の方法

Font Awesomeなどのアイコンフォントには、円を含む様々なアイコンが用意されています。以下のように、アイコンフォントを使って数字を円で囲むことができます。

<i class="fas fa-circle">1</i>
<i class="fas fa-circle">2</i>
<i class="fas fa-circle">3</i>

i {
  font-size: 50px; /* アイコンのサイズ */
  vertical-align: middle; /* 垂直方向に中央揃え */
}

SVGを使う

SVG (Scalable Vector Graphics) を使って、円を描画することもできます。以下のように、SVGを使って数字を円で囲むことができます。

<svg width="50" height="50">
  <circle cx="25" cy="25" r="20" fill="#f00" />
  <text x="25" y="25" text-anchor="middle" font-size="24" fill="#fff">1</text>
</svg>

<svg width="50" height="50">
  <circle cx="25" cy="25" r="20" fill="#f00" />
  <text x="25" y="25" text-anchor="middle" font-size="24" fill="#fff">2</text>
</svg>

<svg width="50" height="50">
  <circle cx="25" cy="25" r="20" fill="#f00" />
  <text x="25" y="25" text-anchor="middle" font-size="24" fill="#fff">3</text>
</svg>