CSSで文字を丸で囲む方法

CSSで文字を丸で囲む方法を紹介します。

簡易的なアイコンを作りたい場合や見出し等を目立たせたい際などに使えるテクニックです。

CSSで文字を丸で囲むサンプルコード

HTML

<div class="circle">1</div>

CSS

.circle {
  background: #ec4646;
  border-radius: 50%;
  width: 80px;
  height: 80px;
  color: #fff;
  font-size: 52px;
  text-align: center;
  line-height: 80px;
}

border-radiusを50%に指定することで、円を作ることができます。
text-align: center;で横位置を中央に、line-heightを円の高さに合わせて80pxに指定することで縦位置を中央に調整しています。

サンプル

丸で囲んだ文字を並べる

次に丸で囲んだ文字を並べてみます。
見出し等で文字にアクセントを付けたいときなどに使えます。

HTML

<span class="circle2">S</span>
<span class="circle2">a</span>
<span class="circle2">m</span>
<span class="circle2">p</span>
<span class="circle2">l</span>
<span class="circle2">e</span>

CSS

.circle2 {
  display: inline-block;
  background: #ec4646;
  border-radius: 50%;
  width: 80px;
  height: 80px;
  color: #fff;
  font-size: 52px;
  text-align: center;
  line-height: 80px;
  box-shadow: 2px 2px 5px 0 rgba(0, 0, 0, 0.5);
}

せっかくなのでbox-shadowで影もつけて少し装飾してみます。

サンプル

Sample

複数行のテキストを丸で囲む①

HTML

<div class="circle3">テキスト<br>テキスト</div>

CSS

.circle3 {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ec4646;
  border-radius: 50%;
  width: 200px;
  height: 200px;
  color: #fff;
  font-size: 20px;
}

サンプル

複数行のテキストを丸で囲む②

HTML

<div class="circle4">
  <span class="circle-txt1">1</span>
  <span class="circle-txt2">テキスト</span>
</div>

CSS

.circle4 {
  display: flex;
  align-items: center;
  align-content: center;
  flex-wrap: wrap;
  background: #ec4646;
  border-radius: 50%;
  width: 200px;
  height: 200px;
  color: #fff;
  font-size: 20px;
  text-align: center;
}
.circle4 > .circle-txt1 {
  display: block;
  width: 100%;
  font-size: 50px;
  line-height: 1;
}
.circle4 > .circle-txt2 {
  display: block;
  width: 100%;
  margin-top: 20px;
}

サンプル