今回はCSSで円を作る方法と、円の中に中央揃えで文字を書く方法を紹介します。
CSSで円を作る方法
円は<div>タグか<span>タグで作るのが定番です。もちろんそれ以外でも可能です。
<div>で円を作る方法
超簡単に説明すると、円にしたい要素にborder-radius: 50%;と記述するだけです。
具体例を見てみましょう。
<div class="circle"></div>.circle {
width: 100px;
height: 100px;
background-color: pink;
border-radius: 50%;/* ←円を作る */
}border-radiusは角を丸くするプロパティです。
四隅を別々に丸くすることもできるのですが、50%と書いておけば全ての角が50%丸くなる = 正円になります。
widthやheight、background-colorを指定し忘れないように注意しましょう。
これらを指定しないと円が作れません（最初から高さが決まっている<p>などの要素なら指定しなくても作れる）
background-colorには色を指定しておかないと背景と同化して見えなくなります。わかりやすいように適当な背景色をつけておきましょう。
<span>で円を作る方法
<span>で円を作る場合はborder-radius: 50%;に加えて、display: inline-block;を指定します（←コレ忘れがちです。必ず指定してください）
<span class="circle2"></span>.circle2 {
display: inline-block;/* ←忘れない！ */
width: 100px;
height: 100px;
background-color: skyblue;
border-radius: 50%;/* ←円を作る */
}<span>は初期値がdisplay: inline;なので、widthやheightが変更できるようにinline-blockを指定します。これを指定しないと全く円が作れないので注意してください。
あとは円がわかりやすいようにbackground-colorを適当に指定しておきましょう。
<div>で作る円と<span>で作る円の違いは？
<div>で作る円と<span>で作る円の違いは、ブロック要素であるかインライン要素であるかです。
<div>で作る円はブロック要素なので横に並べて配置することはできません。
一方<span>はインライン要素なので横に並べることができます。
あとは中央寄せにしたい時に指定するプロパティが違うとかそれくらいです。レイアウトによって使い分けましょう。
基本的に自分が使いやすいと思う方を使えばいいと思います。ちなみに僕は<div>で作る円の方が好きです。
円を中央に配置する
中央寄せの方法は<div>と<span>で異なります。
<div>で作った円を中央に配置
<div>で作った円を中央に配置するには、円の要素にmargin: 0 auto;と記述します（数値は0じゃなくてもいいです）
<span class="circle"></span>.circle {
width: 100px;
height: 100px;
background-color: pink;
border-radius: 50%;
margin: 0 auto;/* ←ブロック要素が左右に中央揃え */
}
margin: auto;はブロック要素を中央寄せすることができます。大体margin: ◯px auto;と書いて左右だけ中央揃えにする場合が多いですが、もちろん縦方向の中央揃えもできます。
.circle {
width: 100px;
height: 100px;
background-color: pink;
border-radius: 50%;
margin: auto;/* ←ブロック要素が上下左右に中央揃えになる */
}ブロック要素に対してmargin: auto;を指定すると、親要素に対して上下左右に中央揃えになります。
ブロック要素を中央寄せしたいときはmargin: auto;
<span>で作った円を中央に配置
<span>で作った円を中央に配置するには、円の親要素にtext-align: center;と記述します（<span>に指定すると中のテキストが中央揃えになり、円自体は中央揃えにはなりません）
<div class="frame">
<span class="circle2"></span>
</div>.frame {
text-align: center;/* ←親要素に指定！ */
border: 3px solid #ddd;
}
.circle2 {
display: inline-block;
width: 100px;
height: 100px;
background-color: skyblue;
border-radius: 50%;
}円の親要素にtext-align: center;を指定することに注意してください。このミスのせいでどれだけ頭を悩ませたことか…
円の中に中央揃えの文字を書く方法
円の中心に文字を書きたい場合は上下左右で中央揃えにして真ん中に文字が表示されるようにします。
方法を2種類紹介します。
文字が1行の場合
カウンターなど、文字が1行だけの場合はline-height: 円の高さ;を指定することで高さが中央揃えになります。line-heightとheightの値が同じということですね。
例えば円の高さが100pxならline-height: 100px;と指定します。
また、左右の中央揃えは先ほど解説した通りtext-align: center;でできます。
<div class="circle">1</div>.circle {
width: 100px;
height: 100px;
background-color: pink;
border-radius: 50%;
margin: 0 auto;/* ←円を中央揃え */
text-align: center;/* ←文字を左右に中央揃え */
line-height: 100px;/* ←文字を上下に中央揃え */
}左右の文字の中央揃えは<div>でも<span>でも同じで、円にtext-align: centerを指定すれば大丈夫です。
ちなみにカウンターの作り方はcounterを使ってサクッとカウンターを作る方法で紹介しています。
borderを使った円の場合は注意
borderを使って作った円で1行の文字を中央揃えにしたいときは、line-height: 円の高さ - 上下のborder;とします。
例えば円の高さが100px、ボーダーが10pxの場合、コンテンツの部分は80pxです（高さ100pxには上下のボーダー20pxが含まれる→コンテンツ自体は80pxになる）
なので円の高さから上下のボーダーを引いた値をline-heightに指定する必要があります。
<div class="circle">1</div>.circle {
width: 100px;
height: 100px;
border: 10px solid pink;/* ←上下20pxのボーダー */
background-color: #fff;
border-radius: 50%;
margin: 0 auto;
text-align: center;
line-height: 80px;/* ←円の高さ100px - 上下のボーダー20px */
}
文字が2行以上の場合
文字が2行以上の場合はline-heightは使えません。なので中の子要素を絶対配置にして中央に固定してしまいます。
<div class="circle">
<p class="circle-inner">2行以上だ</p>
</div>.circle {
position: relative;/* ←文字の親要素に指定 */
width: 100px;
height: 100px;
background-color: pink;
border-radius: 50%;
margin: 0 auto;
text-align: center;
}
.circle-inner {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}文字が2行以上の場合は円と文字を分けます。
まず円（親要素）にposition: relative;を指定し、文字（子要素）にposition: absolute;を指定します。
文字はtop: 50%; left: 50%;で中央に来るように配置します。
ただ、これだけだと文字の要素の起点（左上）が中央にくる = 文字の要素自体は中央に配置されていないので、transform: translate(-50%, -50%);を指定して文字の要素の50%分を逆方向に戻します。
これで文字の中央配置ができました。
ちなみにこの方法はあらゆる要素を中央揃えにできる便利な方法です。覚えておきたいですね。
CSSの理解をさらに深めたい人は以下の本が参考になります。
サイトを3つ作る中で便利な技術やプロパティがたくさん出てくるので、初心者→中級者を目指す人に読んでもらいたい1冊です。
他にもCSSだけで三角形を作る方法もあります。
詳しくは「CSSだけで三角形を作る方法と、その原理を解説してみた【使い所も紹介】」を参考にしてください。
