CSSで半円を描く方法をサンプルコード付き解説!
CSSで半円を描く方法をサンプルコード付きで解説します。また、半円の描き方を応用して、正円、楕円なども書けるようになるので、しっかりとコードの意味を理解しましょう。CSSだけで様々な円を描けるようにしっかりとマスターしましょう!
CSSで半円を描きたい
CSSのみで次のような半円を書いてみましょう。
CSSで半円を描く方法
半円を書くためにはborder-radius
プロパティとheight
,width
を組み合わせることで表現できます。
border-radius
プロパティとは角を丸める効果があります。また、height
,width
で直径、半径を指定できるので、その組み合わせで楕円、正円まで書くことができます。
また、border-radius
プロパティの記法は以下の通りです。
border-radiusプロパティ
border-radius:左上 右上 右下 左下;
実際に半円を書いてみよう。
ここまでで学んだことを生かして半円を書いてみましょう。
半円では高さと横幅の割合が2:1になることに注意してください。また、border-radius
プロパティを工夫することで上下左右どの向きでも半円を作ることができます。
それでは以下のサンプルコードで確認して下さい。
div
タグなので背景に色が指定されていることに注意してください
レスポンシブデザインでも崩れないために。
レスポンシブデザインで横幅が変わった際に円が崩れてしまうことがあります。
その際は高さ、横幅よりborder-radius
プロパティの設定値を大きくすることで解決します。
具体的には以下の通りです。
レスポンシブデザインの円
.circle{
width: 200px;
height: 100px;
border-radius: 500px 500px 0 0;
}
別の記法で書いてみよう。
先ほどはpxで指定しましたが、今度は%で指定してみましょう。
基本的には同じコードですが、%で指定する場合、水平方向と垂直方向の両方を指定しなければなりません。
以下のサンプルコードで違いを確認してください。
他の円も描いてみよう。
ここからは半円だけでなく、正円や楕円の描き方を解説していきます。
まず正円ですが正円は高さと横幅が1:1になります。また、border-radius
プロパティの設定値がどこでも同じなので、1つにまとめることができます。
まとめ
CSSで半円を書く方法を解説しました。コーディングの際にぜひ活用してください。
またborder-radius
プロパティを今回は多用しましたが、もしもborder-radius
プロパティを設定しているのに上手く効かないという方はぜひ下記を参考にしてみて下さい。