CSSでの円の作り方と、その上下左右中央に文字を表示する方法

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で作ることができ、これはボタンを作る時などに利用できます。

とても簡単なので、ぜひ活用していきましょう。

• Tweet
• Facebook
• はてブ
• Pocket