こんにちは朱夏です。
今回は、「border-radius」で円を書く方法を解説してみたいと思います。
丸い円を書くにはどうしたらいいんだろう。
「border-radius」を使えば、簡単に円を書くことが出来ます。
それでは、やっていきましょう。
円を書く方法
「border-radius」とは
あとがき
円を書く方法
はじめに、円を書く方法を解説していきます。
サンプルはこちら。
See the Pen
mdePNRE by 朱夏 (@syunatsu1)
on CodePen.
書き方の手順は以下です。
- divなどの要素を用意
- 縦横の幅を指定
- 「border-radius」で一辺の半分の幅を指定
サンプルの様に正円を作る場合、一辺が100pxの正方形を最初に作ります。
そして、「border-radius」で一辺の50%の長さ(50px)に指定する事で完成です。
「border-radius」とは
「border-radius」について説明しておこうと思います。
「border-radius」とは、本来は要素の角を丸めるためのプロパティです。
それぞれの角を限界まで丸めると、直線部分が消えて円になるという仕組みですね。
「border-radius」を使ったサンプルはこちらになります。
See the Pen
RwWaXXZ by 朱夏 (@syunatsu1)
on CodePen.
書き方の説明はこんな感じです。
border-radius: 50px 0 50px 0 / 30px 0 30px 0;
指定している長さは、左上から時計回りに指定しています。
「/」で区切られた前半は水平方向(横)、後半は垂直方向(縦)の長さを指定しています。
水平方向も垂直方向も同じ値を指定する場合は、「/」より後ろを省略する事が出来ます。
あとがき
というわけで、「border-radius」で円を書く方法を解説してみました。
まとめは以下です。
- 「border-radius」は角を丸くするプロパティ
- 一辺の半分の値を指定すればOK
- 値の指定は左上から時計回り
正円だけでなく、以下の様な感じで正方形からでも楕円を書いたり、長方形を楕円にしたりすることも可能です。
See the Pen
BaozBKP by 朱夏 (@syunatsu1)
on CodePen.
元の要素の形や、値を変化させて、どんな形になるか遊んでみると、色々見につくと思います。
今回は以上です。
次回もよろしくお願いします。
