CSSで半円を描く方法をサンプルコード付き解説!

CSSで半円を描く方法をサンプルコード付きで解説します。また、半円の描き方を応用して、正円、楕円なども書けるようになるので、しっかりとコードの意味を理解しましょう。CSSだけで様々な円を描けるようにしっかりとマスターしましょう!

コンテンツ [表示]

  1. 1CSSで半円を描きたい
  2. 2CSSで半円を描く方法
  3. 2.1実際に半円を書いてみよう。
  4. 2.2レスポンシブデザインでも崩れないために。
  5. 2.3別の記法で書いてみよう。
  6. 2.4他の円も描いてみよう。
  7. 2.5まとめ

CSSで半円を描きたい

CSSのみで次のような半円を書いてみましょう。

CSSで半円を描く方法

半円を書くためにはborder-radiusプロパティとheight,widthを組み合わせることで表現できます。

border-radiusプロパティとは角を丸める効果があります。また、height,widthで直径、半径を指定できるので、その組み合わせで楕円、正円まで書くことができます。

また、border-radiusプロパティの記法は以下の通りです。

border-radiusプロパティ

border-radius:左上 右上 右下 左下;
あわせて読みたい
border-radius
CSSの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プロパティを設定しているのに上手く効かないという方はぜひ下記を参考にしてみて下さい。

あわせて読みたい
border-radiusが効かない場合の原因と対処法を解説!のイメージ
border-radiusが効かない場合の原因と対処法を解説!
CSSの角丸を実現するborder-radiusのプロパティが効かない場合の原因と対処法について解説していきます。
GeekHive採用サイト

関連記事