サイトを作る時、円形のパーツを作りたい時ってよくありますよね。
円は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.
2行の文字を円の中央に表示する方法
もちろん文字を2行にしても、円の中心に表示することが可能です。
今回はボタンを想定し、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で作ることができ、これはボタンを作る時などに利用できます。
とても簡単なので、ぜひ活用していきましょう。