記事内に商品プロモーションが含まれる場合があります
今回は、CSSでの円の描き方をまとめて紹介していきます。文字を正円形のど真ん中に配置する方法なども合わせて解説していきます。
1. CSSでの円の描き方
CSSでは以下のように円を描きます。
セレクタ {
width: ◯◯px;/*幅*/
height: ◯◯px;/*高さ*/
border-radius: 50%;/*角丸*/
}widthとheightでボックスの幅と高さを指定し、border-radius:50%で角の丸みを50%にしています。これにより円が出来上がります。
なお、説明不要かもしれませんがセレクタでは、丸くしたい要素を指定します。セレクタの書き方はこちらの記事で解説しています。
実際の書き方例を２つ紹介します。
CSS例1：divやpタグで円を描く
<div class="circle"></div> <p class="circle"></p>CSS
.circle{
width: 80px;
height: 80px;
border-radius: 50%;
background: skyblue;/*背景色*/
}
幅と高さが80pxの円が出来上がりました。背景色を指定しないと、円が見えないので注意しましょう。
例2：spanやaタグで円を描く
<span class="circle"></span> <a class="circle" href="~"></a>CSS
.circle{
display: inline-block;
width: 80px;
height: 80px;
border-radius: 50%;
background: skyblue;
}
divやpタグの場合と何が違うかというと、display: inline-blockという指定がされています。
インラインの要素にはinline-block指定を忘れずに
spanタグやaタグは、displayプロパティの初期値がinlineです。display: inlineの要素では、widthとheightを指定することができません（指定しても効きません）。
inline-blockに変えることで、円の幅と高さが指定できるようになるわけです。
displayプロパティについては、こちらの記事で詳しく図解しています。ぜひ参考にしてみてください。
2. 円の中心に文字をのせる方法
次に円の中心に文字を配置する方法を解説します。
文章が1行の場合
文字「数字だけのせる」や「アイコンだけのせる」というように、文章が次の行へと折り返さない場合には、以下のように書きます。
<a class="circle" href="~">1</a>CSS
.circle{
display: inline-block;
width: 80px;
height: 80px;
border-radius: 50%;
background: skyblue;
text-align:center;
line-height: 80px;
}
下の3行がポイントです。
text-align: center
⇒文字の左右中央寄せ指定です。これにより幅80pxの中央に配置されるようになります。
line-height: 80px;
⇒こちらは行の高さの指定です。line-heightとheightの値は合わせるようにしましょう。
なお、文字のサイズや色については、通常通り変えればOKです。詳しくはこちらの記事をどうぞ。
2行以上の文章を円にのせる場合
上の方法では「円の高さ＝行の高さ」としています。そのため、文が2行以上になると、円から文字がはみ出てしまいます。2行以上の文章を配置したい場合には、以下のように書きましょう。
<a class="circle" href="~"> <span>1<br>sample</span> </a>CSS
.circle {
position: relative;
display: inline-block;
width: 80px;
height: 80px;
border-radius: 50%;
background: skyblue;
}
.circle span {
position: absolute;
display: inline-block;
left: 0;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
width :80px;
text-align:center;
}
sample
HTMLの解説：円と文字を分ける
まず、HTMLでは、円と文字の部分を分けます。上の例の場合、円自体はaタグで、文字はspanタグで配置しています。<br>は例として改行させるためのものなので、必要ありません。
CSSの解説：文字を絶対配置
まずは、aタグで円を作っています。その円のど真ん中にspanタグをposition:absoluteで絶対配置しています（positionについては下記の記事をどうぞ）。
spanの絶対配置の位置は、top:50%だけだと親要素の真ん中から少しズレてしまうので、transform: translateY(-50%)でど真ん中に配置されるように調整しています。
spanの横幅は円の幅と同じく80pxにしてあるため、左右の絶対配置位置はleft:0（左角にピッタリ）でOKです。
なお、円の角に文字が近づきすぎてしまうのが気になる場合には、文字（今回だとspanタグ）に対してpaddingを指定しましょう。
3. CSSで円を枠線にする
円に枠線をつける方法はとても簡単、通常通りborderプロパティで指定するだけです。例えば、太さ3pxの水色の実線円を作るには以下のような書き方をします。
<a class="circle" href="~">1</a>CSS
.circle{
display: inline-block;
width: 80px;
height: 80px;
text-align:center;
line-height: 80px;
border-radius: 50%;
border: solid 3px skyblue;
}
点線にしたい場合には、solidの代わりにdashedと書けば良いですね。ちなみに、この例ではbackgroundプロパティは消しましたが、背景色を合わせてつけることももちろんできます。
4. 円を親要素の左右中央に配置する方法
参考までに「円自体を親要素の中央に配置したい」という場合の書き方を紹介します。
パターン1：display:blockの要素で作られた円の場合
divタグやpタグなど「display:blockの要素」で作られた円を中央寄せする場合には、marginプロパティを使います。具体的には以下のように書きます。
<div class="circle"></div> <p class="circle"></p>CSS
.circle{
width: 80px;
height: 80px;
border-radius: 50%;
background: skyblue;/*背景色*/
margin: 10px auto;
}
ブロックの要素は、margin: ◯px autoと書くことで親要素の中央に配置されるようになります。◯pxの部分には、上下の余白の値を指定します。
パターン2：inline-blockの円の場合
さきほどspanタグやaタグで円を作る場合には「display:inline-blockを指定する」と書きました。この場合、親要素に対してtext-align:centerを指定することで中央寄せができます。
<div class="parent"><!--親--> <span class="circle"></span> </div>CSS
.parent {
text-align: center;
}
.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のborder-radiusについてのブラウザ対応状況です（2017年7月時点）。気になるIEは9〜対応しています。
ベンダープレフィックスをつけるならSafariやAndroid向けの-webkit-やFireFox向けの-moz-ですが、まぁ必要ないのではないかと思います。僕は普段Webデザインをするときにはつけていません。
