【CSS】半円を作る方法

CSSで半円を作るには、ボーダー半径と擬似要素を組み合わせて簡単に実現できます。CSSのみを使って半円を作成する方法の例を紹介します。

単一の要素で半円を作る
Before/After 擬似要素で半円を作る
よくある質問（FAQ）
まとめ

単一の要素で半円を作る

1つの要素で半円を作成するには、border-radiusを使って、要素の一部だけを表示します。

HTML

<div class="half-circle"></div>

CSS

.half-circle {
  width: 100px;
  height: 50px; /* 高さを幅の半分にする */
  background-color: #3498db;
  border-top-left-radius: 100px;  /* 左上の半径を幅に合わせる */
  border-top-right-radius: 100px; /* 右上の半径を幅に合わせる */
}

Before/After 擬似要素で半円を作る

::beforeや::after擬似要素を使って、さらにカスタマイズした半円を作成することも可能です。

HTML

<div class="half-circle"></div>

CSS

.half-circle {
  width: 100px;
  height: 50px;
  position: relative;
  overflow: hidden;
}

.half-circle::before {
  content: "";
  width: 100px;
  height: 100px;
  background-color: #2ecc71;
  border-radius: 50%;
  position: absolute;
}

よくある質問（FAQ）

Q. CSSでスピナー（ローディングアニメーション）を作るには？

A. width・height・border-radius: 50%で円形の要素を作り、border-topに色を付けて他のborderは透明にします。@keyframesでtransform: rotate(0deg)からrotate(360deg)へのアニメーションを設定します。

Q. CSSのみでローディングスピナーを作るベストな方法は？

A. div { width: 40px; height: 40px; border: 4px solid #f3f3f3; border-top: 4px solid #0070f3; border-radius: 50%; animation: spin 1s linear infinite; }が基本の実装です。

Q. dots（点滅する点）のローディングアニメーションを作るには？

A. 3つのdivをインラインブロックで並べ、@keyframesでopacityを0→1→0に変化させます。各dotにanimation-delayをずらして設定すると波打つアニメーションになります。