サイトを作る時、円形のパーツを作りたい時ってよくありますよね。
円はCSSで簡単に作ることができます。
さらに今回はCSSで作成した円の中央に文字を置く方法も紹介します。
CSSでの円の作り方
まずCSSで円を作ってみましょう。
<span class="circle"></span>
.circleに対してCSSを当てます。
.circle {
background-color:#f00;
width: 100px;
height: 100px;
display: inline-block;
border-radius: 50%;
}
border-radius: 50%;は、各ブラウザに対して角を50%丸める命令です。50%を指定することで、円形を簡単に作ることができます。
See the Pen
circle2 by R (@It_is_R)
on CodePen.
円の上下左右中央に文字を表示する方法
続いて、円の中央に文字を表示する方法です。
<p class="circle">Rです</p>
.circle {
color: #fff;
background-color:#f00;
padding: 0;
margin: 0;
width: 100px;
height: 100px;
line-height: 100px;
text-align: center;
display: inline-block;
border-radius: 50%;
}
See the Pen circle by R (@It_is_R) on CodePen.
２行の文字を円の中央に表示する方法
もちろん文字を２行にしても、円の中心に表示することが可能です。
今回はボタンを想定し、aタグを使ってみました。
<a harf="#" class="circle">
<span class="texts">
<div>二行の</div>
<div>ボタン</div>
</span>
</a>
.circle {
color: #fff;
background-color:#f00;
width: 100px;
height: 100px;
text-align: center;
display: inline-block;
border-radius: 50%;
}
.texts {
margin: 100px;
}
See the Pen
circle3 by R (@It_is_R)
on CodePen.
円の位置を変更する
円の位置を変更するには、position: absolute;を使います。
position: absolute;を使うと、絶対位置への配置となります。
例えば以下のようにすると、上から50px、左から70pxの位置になります。
position: absolute; top: 50px; left: 70px;
See the Pen
circle4 by R (@It_is_R)
on CodePen.
もしも右からや、下からの位置を指定したい場合は以下のようにします。
これは下から50px、右から70pxの位置に円が表示されます。
position: absolute; bottom: 50px; right: 70px;
まとめ
Webサイトを作る時、円を使ったデザインにしたいときはよくあると思います。
円はCSSで作ることができ、これはボタンを作る時などに利用できます。
とても簡単なので、ぜひ活用していきましょう。
