CSSでの円の作り方と、その中央に文字を置く方法を紹介します。
CSSでの円の作り方
まずCSSで円を作ってみましょう。
<span class="circle"></span>.circleに対してCSSを当てます。
.circle {
background-color:#f00;
width: 100px;
height: 100px;
display: inline-block;
border-radius: 50%;
}displayには、「inline-block」などを指定しましょう。
「inline-block」ならば、円をいくつか作ると、横並びになります。
また、「border-radius」で、角を丸めることができます。
50%を指定すると、円になります。
円の上下左右中央に、文字を表示する方法
続いて、円の中央に文字を表示する方法です。
<span class="circle">こんにちは</span>CSSは、次のようにします。
.circle {
display: inline-block;
width: 100px;
height: 100px;
color: #fff;
background-color:#f00;
line-height: 100px;
text-align: center;
border-radius: 50%;
}「line-height」に円の高さ（height）と同じ値を指定することで、文字が上下中央になります。
また、「text-align: center」で、文字が左右中央になります。
２行の文字を、円の中央に表示する方法
つづいて、２行の文字を、円の中心に表示する方法です。
まず文字は、行ごとにdivで囲み、さらにそれをcircleで囲います。
<span class="circle">
<div>こんにちは</div>
<div>おはよう</div>
</span>CSSでは、.circleに「display: inline-grid」を指定します。
さらに、「text-align: center」、「align-content: center」で、文字が上下左右中央になります。
.circle {
display: inline-grid;
color: #fff;
background-color: #f00;
width: 100px;
height: 100px;
border-radius: 50%;
text-align: center;
align-content: center;
}
円の位置を変更する
つづいて、円の位置を変更してみましょう。
今回は、親要素にたいして、絶対位置を指定してみます。
親要素はcontentsというclass名にしました。
<div class="contents">
<span class="circle contents__circle">こんにちは</span>
</div>また、CSSは次のようにします。
.contents {
position: relative;
}
.contents__circle {
position: absolute;
top: 80px;
left: 50px
}
.circle {
display: inline-block;
width: 100px;
height: 100px;
color: #fff;
background-color:#f00;
line-height: 100px;
text-align: center;
border-radius: 50%;
}親要素の.contentsには、「position: relative」を指定します。
（ここでは省略しますが、.contentsにはその他の要素も含まれていたりして、ある程度の高さがあるものとします）
さらに、.contents__circleには「position: absolute」を使って、絶対位置を指定します。
位置は、top、left、right、bottomで、決めることができます。
そして、.circleに、さきほどの円のスタイルを指定しています。
まとめ
Webサイトを作る時、円を使ったデザインにしたいときはよくあると思います。
円はCSSで作ることができ、これはボタンを作る時などに利用できます。
とても簡単なので、ぜひ活用していきましょう。
