CSSだけで円を描く方法とborder-radiusの理解【完全ガイド】

円はサイトのUIやグラフィックに多く使われる基本的な形状です。

今回は、CSSだけで円を描く方法と、その中でも重要な役割を果たすborder-radiusプロパティの解説をします。

CSSで円を描く方法

まず、円を描くためには、HTMLを用意します。

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

.circle {
  width: 100px;
  height: 100px;
  background-color: #333;
  border-radius: 50%;
}

背景色を指定しないと、円が見えません。

.circle{
	width: 100px;
	height: 100px;
	border : 1px solid;
	border-radius: 50%;
}

どちらでもborder-radiusが必要です。

CSSプロパティの border-radius は、要素の角を丸くするために使用されます。これにより、要素は角が丸くなった長方形または円に見えます。

CSSプロパティの border-radius は、要素の角を丸くするために使用されます。これにより、要素は角が丸くなった長方形または円に見えます。

border-radiusプロパティには、最大4つの値を指定できます。

これらの値はそれぞれ要素の角を制御し、値の数によって解釈が異なります。

一つの値：この値はすべての角に適用されます。例：border-radius: 10pxは、すべての角を10ピクセルの半径で丸くします。
二つの値：最初の値は左上角と右下角に適用され、二つ目の値は右上角と左下角に適用されます。例：border-radius: 10px 20px。
三つの値：最初の値は左上角、二つ目の値は右上角と左下角、三つ目の値は右下角に適用されます。例：border-radius: 10px 20px 30px。
四つの値：それぞれの値は左上角、右上角、右下角、左下角の順に適用されます。例：border-radius: 10px 20px 30px 40px。

また、border-radius には %/px 両方の単位が使え、% を用いることで親要素に対する相対的な大きさで角を丸くすることができます。

border-radius: 50% は、要素の角を完全に丸くして、円形または楕円形にします。

50%

30%

10%

border-radius プロパティの値が50％を超える場合、角丸が更に大きくなりますが、その影響は形状の形と大きさによって異なります。

正方形の場合、border-radiusが50%を超えてもその影響は見られません。なぜなら、50%がすでに各辺の長さの半分に相当し、その結果、要素は完全な円形になるからです。

長方形ではそれぞれの角が異なる楕円形になります。

HTMLタグにはそれぞれ異なるデフォルトのスタイルや動作があります。基本的に、どの要素でもborder-radiusプロパティを使って円形にすることが可能です。

実際の開発において、border-radiusプロパティは様々な要素に適用され、その見た目を丸みを帯びたものにするために使用されます。

以下に、最も一般的に使用される要素をいくつか挙げます。

divタグはウェブサイトの構造を構築するための主要な要素です。ブロックレベル要素で、デフォルトで全幅を取り、新しい行から始まります。レイアウトとコンテナを作成するために頻繁に使用されます。

他の要素に影響を与えずにテキストをグループ化するため、インライン要素であるspanタグが使われています。

ボタンのスタイルをカスタマイズするために、よくborder-radiusプロパティを使って丸みを持たせます。

角が丸くなったボタンの一例です。

<button style="padding: 10px 20px; background-color: #007BFF; color: white; border: none; border-radius: 5px;">ボタン</button>

border-radiusプロパティを使って、画像を円形に表示することができます。

<img src="画像.jpg" style="width: 200px; height: 200px; border-radius: 50%;">

以上がCSSで円を描く方法とborder-radiusの使い方についての解説です。これらの基本をマスターすることで、より豊かな表現が可能となります。