数字を丸で囲むCSS (Title in English: CSS for Circular Numbers)
2024-09-17
CSSで数字を丸で囲む方法
HTML、CSS、CSS Shapesを利用して、数字を丸で囲む方法について説明します。
HTMLの構造
まず、HTMLで数字を配置する要素を作成します。例えば、<span>要素を使います。
<span class="circled-number">123</span>
CSSのスタイル
次に、CSSを使って、<span>要素にスタイルを適用します。
絶対配置と丸い形状
border-radiusプロパティを使って、要素を丸くします。<span>要素を絶対配置にすることで、他の要素の影響を受けずに位置を調整できます。
.circled-number {
position: absolute;
border-radius: 50%;
width: 30px;
height: 30px;
text-align: center;
line-height: 30px;
background-color: #f0f0f0; /* 背景色 */
border: 2px solid #000; /* 枠線 */
}
CSS Shapes
- CSS Shapesを使って、より複雑な形状を生成できます。例えば、ハート型や星型を数字の周囲に配置できます。
.circled-number {
position: relative;
clip-path: circle(50% at 50% 50%); /* 円形 */
/* 他の形状も指定可能: polygon, ellipse, inset */
}
注意事項
- 具体的なデザインに合わせて、スタイルを調整してください。
- CSS Shapesはブラウザのサポート状況を確認してください。
position: absoluteを使用する場合、親要素に相対的な位置が指定されます。親要素のスタイルも考慮してください。
例
<div>
<span class="circled-number">123</span>
<span class="circled-number">456</span>
</div>
/* 他のスタイル */
.circled-number {
/* ... */
}
<span class="circled-number">123</span>
.circled-number {
position: absolute;
border-radius: 50%;
width: 30px;
height: 30px;
text-align: center;
line-height: 30px;
background-color: #f0f0f0; /* 背景色 */
border: 2px solid #000; /* 枠線 */
}
background-colorとborderで背景色と枠線を設定します。text-align: centerとline-heightで数字を中央に配置します。widthとheightで要素のサイズを調整します。border-radius: 50%で丸い形状を指定します。
<span class="circled-number">123</span>
.circled-number {
position: relative;
clip-path: circle(50% at 50% 50%); /* 円形 */
/* 他の形状も指定可能: polygon, ellipse, inset */
}
polygon,ellipse,insetなどの他の形状も指定可能です。clip-path: circle(50% at 50% 50%)で円形のクリッピングパスを指定します。- CSS Shapesを使って、より複雑な形状を生成できます。
複数の数字を囲む
<div>
<span class="circled-number">123</span>
<span class="circled-number">456</span>
</div>
- 複数の
<span>要素を作成し、同じクラスを適用することで、複数の数字を丸で囲むことができます。
数字を丸で囲むCSSの代替方法
SVG (Scalable Vector Graphics)を利用する
SVGはベクターグラフィック形式で、HTMLファイルに直接埋め込むことができます。
<svg width="30" height="30" viewBox="0 0 30 30">
<circle cx="15" cy="15" r="15" fill="#f0f0f0" stroke="#000" stroke-width="2"/>
<text x="50%" y="50%" text-anchor="middle" fill="#000">123</text>
</svg>
<text>要素で数字を配置します。<circle>要素で円を描き、属性でサイズや色を指定します。<svg>要素でSVG画像を作成します。
Font Iconを利用する
Font Iconはフォントファイルに組み込まれたアイコンを使用する方法です。
<i class="fas fa-circle"></i>
<span>123</span>
- アイコンのクラスを指定し、数字を一緒に配置します。
CSS Pseudo-Elementsを利用する
.circled-number::before {
content: "";
display: block;
width: 30px;
height: 30px;
border-radius: 50%;
background-color: #f0f0f0;
border: 2px solid #000;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.circled-number {
position: relative;
}
- 擬似要素を絶対配置にし、親要素の中央に配置します。
<span>要素の前に擬似要素を作成し、丸い形状を指定します。
これらの方法の比較
- CSS Pseudo-Elements
他のCSSプロパティと組み合わせて柔軟にデザインできますが、ブラウザのサポート状況を確認する必要があります。 - Font Icon
シンプルで使いやすいですが、アイコンの選択肢が限られる場合があります。 - SVG
高い柔軟性と品質を提供しますが、複雑なデザインの場合、コードが長くなることがあります。
html css css-shapes
