記事内に商品プロモーションが含まれる場合があります
今回は、CSSでの円の描き方をまとめて紹介していきます。文字を正円形のど真ん中に配置する方法なども合わせて解説していきます。
1. CSSでの円の描き方
CSSでは以下のように円を描きます。
.circle {
width: 80px; /*幅*/
height: 80px; /*高さ*/
border-radius: 50%; /*角丸*/
}widthとheightを同じ値にしてボックスを正方形にし、border-radius: 50%で円にします。横方向の半径は外側の幅の50%、縦方向の半径は外側の高さの50%です。縦横の寸法が異なる場合は楕円になります。以下のコピー例では、幅・高さにpaddingと枠線を含めるbox-sizing: border-box;も明示しています。
なお、説明不要かもしれませんがセレクタでは、丸くしたい要素を指定します。セレクタの書き方はこちらの記事で解説しています。
CSSのセレクタとは？覚えておきたい25種類と書き方CSS例1：divやpタグで円を描く
<div class="circle-c01">
<div class="circle"></div>
<p class="circle"></p>
</div>.circle-c01 {
color: #333;
font: 16px/1.3 Arial, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
}
.circle-c01 .circle {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.circle-c01 a.circle {
color: inherit;
text-decoration: none;
}
.circle-c01 a.circle:hover {
opacity: 1;
}
.circle-c01 a.circle:focus-visible {
outline: 2px solid #555;
outline-offset: 3px;
}
.circle-c01 .circle {
width: 80px;
height: 80px;
border-radius: 50%;
background: skyblue; /*背景色*/
}
.circle-c01 .circle + .circle {
margin-top: 20px;
}幅と高さが80pxの円が出来上がりました。この例のように中身も枠線もない円は、背景色を指定しないと見えないので注意しましょう。
例2：spanやaタグで円を描く
<div class="circle-c02">
<span class="circle"></span>
<a class="circle" href="https://saruwakakun.com/" aria-label="サルワカのトップページへ"></a>
</div>.circle-c02 {
color: #333;
font: 16px/1.3 Arial, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
}
.circle-c02 .circle {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.circle-c02 a.circle {
color: inherit;
text-decoration: none;
}
.circle-c02 a.circle:hover {
opacity: 1;
}
.circle-c02 a.circle:focus-visible {
outline: 2px solid #555;
outline-offset: 3px;
}
.circle-c02 .circle {
display: inline-block;
width: 80px;
height: 80px;
border-radius: 50%;
background: skyblue;
} divやpタグの場合と何が違うかというと、display: inline-blockという指定がされています。
インラインの要素にはinline-block指定を忘れずに
spanやaは、通常のブラウザのスタイルではdisplay: inlineです。このような非置換インライン要素には、widthとheightを指定しても幅・高さとしては適用されません。inline-blockに変えることで、円の幅と高さを指定できるようになります。imgなどの置換要素は、この制限の対象ではありません。
displayプロパティについては、こちらの記事で詳しく図解しています。ぜひ参考にしてみてください。
2. 円の中心に文字をのせる方法
次に円の中心に文字を配置する方法を解説します。
文章が1行の場合
「数字だけのせる」や「アイコンだけのせる」というように、文章が次の行へと折り返さない場合には、以下のように書きます。
<div class="circle-c03">
<a class="circle" href="https://saruwakakun.com/" aria-label="サルワカのトップページへ">1</a>
</div>.circle-c03 {
color: #333;
font: 16px/1.3 Arial, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
}
.circle-c03 .circle {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.circle-c03 a.circle {
color: inherit;
text-decoration: none;
}
.circle-c03 a.circle:hover {
opacity: 1;
}
.circle-c03 a.circle:focus-visible {
outline: 2px solid #555;
outline-offset: 3px;
}
.circle-c03 .circle {
display: inline-block;
width: 80px;
height: 80px;
border-radius: 50%;
background: skyblue;
text-align: center;
line-height: 80px;
}下の2行がポイントです。
text-align: center
⇒文字の左右中央寄せ指定です。これにより幅80pxの中央に配置されるようになります。
line-height: 80px;
⇒こちらは行の高さの指定です。枠線とpaddingがないこの例では、line-heightとheightを同じ80pxにして1行の文字を上下中央に置いています。中央に揃うのは行ボックスで、文字の形によっては見た目の中心が少し違って感じられることもあります。
なお、文字のサイズや色については、通常通り変えればOKです。詳しくはこちらの記事をどうぞ。
【CSS】文字装飾の基本を総まとめ！初心者向けに解説2行以上の文章を円にのせる場合
上の方法では「円の高さ＝行の高さ」としています。そのため、文が2行以上になると、円から文字がはみ出てしまいます。2行以上の文章を配置したい場合には、以下のように書きましょう。
<div class="circle-c04">
<a class="circle" href="https://saruwakakun.com/" aria-label="サルワカのトップページへ">
<span>1<br>sample</span>
</a>
</div>.circle-c04 {
color: #333;
font: 16px/1.3 Arial, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
}
.circle-c04 .circle {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.circle-c04 a.circle {
color: inherit;
text-decoration: none;
}
.circle-c04 a.circle:hover {
opacity: 1;
}
.circle-c04 a.circle:focus-visible {
outline: 2px solid #555;
outline-offset: 3px;
}
.circle-c04 .circle {
position: relative;
display: inline-block;
width: 80px;
height: 80px;
border-radius: 50%;
background: skyblue;
}
.circle-c04 .circle span {
position: absolute;
display: inline-block;
left: 0;
top: 50%;
transform: translateY(-50%);
box-sizing: border-box;
width: 80px;
line-height: 1.3;
text-align: center;
}HTMLの解説：円と文字を分ける
まず、HTMLでは、円と文字の部分を分けます。上の例の場合、円自体はa、文字はspanで配置しています。<br>は例で明示的に改行するためのものです。自然な折り返しだけでよければ省略できます。
CSSの解説：文字を絶対配置
まずは、aタグで円を作っています。その円のど真ん中にspanタグをposition:absoluteで絶対配置しています（positionについては下記の記事をどうぞ）。
top: 50%で文字のspanの上端を親の高さの中央へ置き、transform: translateY(-50%)でspan自身の高さの半分だけ上へ移動します。これで文字のボックスの上下中央が円の中央に揃います。
spanの横幅も80pxなので、横位置はleft: 0とtext-align: centerで揃えます。
円の端に文字が近づきすぎる場合は、spanにpaddingを指定できます。この例のspanはbox-sizing: border-boxなので、paddingを幅80pxに含められます。ただし、長い文章や大きな文字は円からはみ出すことがあるため、内容に合わせて円の寸法や文字サイズも調整しましょう。
3. CSSで円を枠線にする
円に枠線をつけるには、通常通りborderプロパティを使います。例えば、太さ3pxの水色の実線円は以下のように書きます。外寸80pxのborder-boxから上下3pxずつの線を引くと内側の高さは74pxなので、この例のline-heightも74pxにして文字を中央に揃えています。
<div class="circle-c05">
<a class="circle" href="https://saruwakakun.com/" aria-label="サルワカのトップページへ">1</a>
</div>.circle-c05 {
color: #333;
font: 16px/1.3 Arial, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
}
.circle-c05 .circle {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.circle-c05 a.circle {
color: inherit;
text-decoration: none;
}
.circle-c05 a.circle:hover {
opacity: 1;
}
.circle-c05 a.circle:focus-visible {
outline: 2px solid #555;
outline-offset: 3px;
}
.circle-c05 .circle {
display: inline-block;
width: 80px;
height: 80px;
border-radius: 50%;
text-align: center;
line-height: 74px;
border: solid 3px skyblue;
}破線にしたい場合はsolidの代わりにdashed、点線ならdottedを指定します。この例ではbackgroundを指定していませんが、背景色を合わせてつけることもできます。
4. 円を親要素の左右中央に配置する方法
参考までに「円自体を親要素の中央に配置したい」という場合の書き方を紹介します。
パターン1：display:blockの要素で作られた円の場合
divタグやpタグなど「display:blockの要素」で作られた円を中央寄せする場合には、marginプロパティを使います。具体的には以下のように書きます。
<div class="circle-c06">
<div class="circle"></div>
<p class="circle"></p>
</div>.circle-c06 {
color: #333;
font: 16px/1.3 Arial, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
}
.circle-c06 .circle {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.circle-c06 a.circle {
color: inherit;
text-decoration: none;
}
.circle-c06 a.circle:hover {
opacity: 1;
}
.circle-c06 a.circle:focus-visible {
outline: 2px solid #555;
outline-offset: 3px;
}
.circle-c06 .circle {
width: 80px;
height: 80px;
border-radius: 50%;
background: skyblue;
margin: 10px auto;
} 通常フローのブロック要素で、幅を指定した円の左右に余白がある場合は、margin: 10px auto;で左右の余白を均等にできます。この例の10pxは上下の余白です。親の幅より円が大きい場合や、絶対配置・floatの要素では、この方法だけでは同じように中央に揃いません。
パターン2：inline-blockの円の場合
さきほどspanタグやaタグで円を作る場合には「display:inline-blockを指定する」と書きました。この場合、親要素に対してtext-align:centerを指定することで中央寄せができます。
<div class="circle-c07">
<div class="parent">
<span class="circle"></span>
</div>
</div>.circle-c07 {
color: #333;
font: 16px/1.3 Arial, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
}
.circle-c07 .circle {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.circle-c07 a.circle {
color: inherit;
text-decoration: none;
}
.circle-c07 a.circle:hover {
opacity: 1;
}
.circle-c07 a.circle:focus-visible {
outline: 2px solid #555;
outline-offset: 3px;
}
.circle-c07 .parent {
text-align: center;
}
.circle-c07 .circle {
display: inline-block;
width: 80px;
height: 80px;
border-radius: 50%;
background: skyblue;
} 上の例では、円部分の親要素である.parentに対して、text-alignを指定しています。
「中央寄せがうまくいかない」という場合には、こちらの記事を読んでみてください。CSSの中央寄せの方法を総まとめしています。
5. border-radiusにベンダープレフィックスは必要？
border-radiusはCSS3から登場したプロパティです。そこで、ベンダープレフィックス（≒古いブラウザに対応するための-webkit-◯◯みたいな書き方のこと）が必要なのかな？と思う方もいるかもしれません。
上の図は、CANIUSEの2017年7月時点の対応表です。IE9以降が対応していたことも示していますが、現在の対応状況を表す画像ではありません。
現在の主要ブラウザでは、標準のborder-radiusを使えます。古いSafari・Android向けの-webkit-やFirefox向けの-moz-を、今回の例に追加する必要はありません。複数行例のtransformも標準の書き方にしています。古いブラウザを個別に対象とする場合は、その環境の対応を確認してください。