【CSSで円を作る】border-radius vs clip-path vs background-image
2024-07-27
HTML、CSS、CSS Shapes を使って円を作る方法
円を作るには、以下の HTML と CSS コードを使用します。
<!DOCTYPE html>
<html>
<head>
<style>
.circle {
width: 50px;
height: 50px;
border-radius: 50%;
background-color: red;
}
</style>
</head>
<body>
<div class="circle"></div>
</body>
</html>
このコードは以下の通り動作します。
- HTML で
<div>要素を作成し、circleというクラスを割り当てます。 - CSS で
.circleクラスにスタイルを定義します。widthとheightプロパティで円の幅と高さを 50px に設定します。border-radiusプロパティで角の丸みを 50% に設定します。 これにより、要素の角が丸くなり、円形になります。background-colorプロパティで円の背景色を赤色に設定します。
CSS Shapes モジュールを使った円の作成
CSS Shapes モジュールを使用すると、より柔軟に円を作成することができます。 以下のコードは、CSS Shapes モジュールを使用して円を作る方法を示しています。
<!DOCTYPE html>
<html>
<head>
<style>
.circle {
width: 50px;
height: 50px;
shape-outside: circle();
background-color: red;
}
</style>
</head>
<body>
<div class="circle"></div>
</body>
</html>
このコードは、基本的な HTML と CSS のコードとほぼ同じように動作しますが、shape-outside プロパティを使用して円形を描画しています。
transformプロパティを使用して、円を回転、移動、スケーリングすることができます。box-shadowプロパティを使用して、影を追加することができます。borderプロパティを使用して、円の境界線を設定することができます。
HTML
<!DOCTYPE html>
<html>
<head>
<style>
/* 基本的な円 */
.circle-basic {
width: 50px;
height: 50px;
border-radius: 50%;
background-color: red;
}
/* 境界線付きの円 */
.circle-border {
width: 50px;
height: 50px;
border-radius: 50%;
background-color: red;
border: 5px solid blue;
}
/* 影付きの円 */
.circle-shadow {
width: 50px;
height: 50px;
border-radius: 50%;
background-color: red;
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
}
/* 回転する円 */
.circle-rotate {
width: 50px;
height: 50px;
border-radius: 50%;
background-color: red;
transform: rotate(45deg);
}
/* CSS Shapes モジュールを使用した円 */
.circle-shapes {
width: 50px;
height: 50px;
shape-outside: circle();
background-color: red;
}
</style>
</head>
<body>
<div class="circle-basic"></div>
<div class="circle-border"></div>
<div class="circle-shadow"></div>
<div class="circle-rotate"></div>
<div class="circle-shapes"></div>
</body>
</html>
説明
このコードは、以下の 5 つの円を作成します。
- 基本的な円
これは最もシンプルな円で、border-radiusプロパティを使用して角を丸くしています。 - 境界線付きの円
この円には青い境界線があります。 - 影付きの円
この円には影があります。 - 回転する円
この円は 45 度回転しています。 - CSS Shapes モジュールを使用した円
この円は、shape-outsideプロパティを使用して CSS Shapes モジュールで描画されています。
clip-path プロパティを使う
clip-path プロパティを使用して、円形のクリッピングパスを作成することができます。 以下のコードは、clip-path プロパティを使用して円を作る方法を示しています。
<!DOCTYPE html>
<html>
<head>
<style>
.circle {
width: 50px;
height: 50px;
background-color: red;
clip-path: circle(50% at 50% 50%);
}
</style>
</head>
<body>
<div class="circle"></div>
</body>
</html>
clip-pathプロパティにcircle()関数を設定します。circle()関数は、円の中心と半径を指定します。 今回の場合、中心は要素の 50% に位置し、半径は要素の幅と高さの 50% になります。
background-image プロパティを使う
グラデーションや画像を使用して円を作成することもできます。 以下のコードは、background-image プロパティを使用してグラデーションで円を作る方法を示しています。
<!DOCTYPE html>
<html>
<head>
<style>
.circle {
width: 50px;
height: 50px;
background-image: radial-gradient(circle at 50% 50%, red 0%, transparent 100%);
}
</style>
</head>
<body>
<div class="circle"></div>
</body>
</html>
background-imageプロパティにradial-gradient()関数を設定します。radial-gradient()関数は、放射状グラデーションを作成します。 今回の場合、グラデーションは円の中心から始まり、透明な境界線に向かって広がります。
SVG を使う
SVG (Scalable Vector Graphics) をを使用して、より複雑な円を作成することができます。 SVG は XML ベースのベクター画像フォーマットであり、円を含むさまざまな形状を定義することができます。
以下のコードは、SVG で円を作成する方法を示しています。
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<svg width="50" height="50">
<circle cx="25" cy="25" r="25" fill="red" />
</svg>
</body>
</html>
<svg>要素を使用して SVG ドキュメントを作成します。widthとheight属性を使用して SVG の幅と高さを設定します。<circle>要素を使用して円を定義します。cxとcy属性を使用して円の円の中心座標を設定します。r属性を使用して円の半径を設定します。fill属性を使用して円の塗りつぶしの色を設定します。
どの方法を選択するべきか
使用する方法は、円のスタイルと要件によって異なります。
- より複雑な円やアニメーション付きの円の場合は、SVG を使用することができます。
- グラデーション付きの円の場合は、
background-imageプロパティを使用することができます。 - 境界線や影付きの円の場合は、
clip-pathプロパティまたはbox-shadowプロパティを使用することができます。 - 基本的な円の場合は、
border-radiusプロパティが最も簡単です。
html css css-shapes
