CSSで円を描くテクニック：border-radiusを超えた表現方法
CSS でテキスト付きの円を描く方法
HTML
まず、円とテキストを配置するための HTML コードを作成します。
<div class="circle">
<p>テキスト</p>
</div>
このコードでは、div 要素に circle というクラスを割り当てています。このクラスは、CSS でスタイルを定義するために使用されます。また、p 要素内にテキストコンテンツ (テキスト) を配置しています。
CSS
次に、CSS を使用して円とテキストのスタイルを定義します。
.circle {
width: 100px; /* 円の幅 */
height: 100px; /* 円の高さ */
border-radius: 50%; /* 円形にする */
background-color: #F00; /* 円の色 */
text-align: center; /* テキストを中央揃えにする */
line-height: 100px; /* テキストを垂直方向に中央揃えにする */
position: relative; /* 円を相対位置に配置する */
}
.circle p {
position: absolute; /* テキストを絶対位置に配置する */
top: 50%; /* テキストを垂直方向に中央に配置する */
transform: translateY(-50%); /* テキストを垂直方向に中央に配置する */
margin: 0; /* テキストのマージンを削除する */
font-size: 20px; /* テキストのサイズ */
color: #FFF; /* テキストの色 */
}
この CSS コードは、以下の設定を行います。
.circle要素:- 幅と高さを 100px に設定し、正方形にします。
border-radiusプロパティを使用して、四角形を角丸にします。- 背景色を赤 (#F00) に設定します。
- テキストを中央揃えにします。
- 円を相対位置に配置します。
.circle p要素:- テキストのマージンを削除します。
- テキストのフォントサイズを 20px に設定します。
カスタマイズ
上記のコードはあくまでも基本的な例です。円の色、テキストの内容、フォントサイズなどを変更して、自分の好みに合わせてカスタマイズすることができます。
円を描くには、CSS の border-image プロパティや clip-path プロパティを使用する方法もあります。これらの方法は、より複雑な形状の円を作成したり、画像を使用して円を装飾したりする場合に役立ちます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS でテキスト付きの円を描く</title>
<style>
.circle {
width: 100px;
height: 100px;
border-radius: 50%;
background-color: #F00;
text-align: center;
line-height: 100px;
position: relative;
}
.circle p {
position: absolute;
top: 50%;
transform: translateY(-50%);
margin: 0;
font-size: 20px;
color: #FFF;
}
</style>
</head>
<body>
<div class="circle">
<p>テキスト</p>
</div>
</body>
</html>
このコードを実行すると、赤い円の中に「テキスト」という文字が表示されます。
説明
このコードは以下の通り構成されています。
- HTML:
<!DOCTYPE html>: HTML5 ドキュメントであることを宣言します。<html lang="ja">: HTML ドキュメントの言語を日本語に設定します。<head>: メタデータなどを記述する要素です。<meta charset="UTF-8">: 文字エンコーディングを UTF-8 に設定します。<meta name="viewport" content="width=device-width, initial-scale=1.0">: ビューポートを設定します。<title>CSS でテキスト付きの円を描く</title>: ドキュメントのタイトルを設定します。<style>: CSS コードを記述する要素です。- ここでは、円とテキストのスタイルを定義しています。
<body>: ドキュメントの本文を記述する要素です。<div class="circle">: 円を表すdiv要素です。class="circle": この要素にcircleというクラスを割り当てます。- 円の幅、高さ、背景色などを設定します。
<p>テキスト</p>: 円の中に表示するテキストです。p要素を使用して、段落として表示します。
- CSS:
.circleセレクタ:circleクラスを持つ要素にスタイルを適用します。widthとheightプロパティ: 円の幅と高さを設定します。background-colorプロパティ: 円の背景色を設定します。text-alignとline-heightプロパティ: テキストを中央揃えにします。positionプロパティ: 円を相対位置に配置します。
.circle pセレクタ:.circle要素内にあるp要素にスタイルを適用します。topとtransformプロパティ: テキストを垂直方向に中央に配置します。marginプロパティ: テキストのマージンを削除します。font-sizeプロパティ: テキストのフォントサイズを設定します。colorプロパティ: テキストの色を設定します。
このコードはあくまでも例なので、自由にカスタマイズすることができます。例えば、以下のことが可能です。
- 円の色を変更する
- テキストの内容を変更する
- テキストのフォントサイズを変更する
- 影を追加する
CSS で円を描くその他の方法
clip-path プロパティは、要素の形状を任意の形に切り抜くことができます。円を描く場合、以下のコードのように circle() 関数を使用して円形に切り抜くことができます。
.circle {
width: 100px;
height: 100px;
background-color: #F00;
clip-path: circle(50% at 50%);
}
この方法のメリットは、SVG を使用する必要がなく、比較的シンプルなコードで円を描けることです。デメリットとしては、古いブラウザではサポートされていない場合があることです。
border-image プロパティは、要素の境界線に画像を装飾することができます。円を描く場合、以下のコードのように、円形の画像を境界線として設定することで、円を描くことができます。
.circle {
width: 100px;
height: 100px;
border-image: url('circle.png') 1 round repeat;
}
この方法のメリットは、画像を使用して円を装飾できることです。デメリットとしては、使用する画像を用意する必要があることと、古いブラウザではサポートされていない場合があることです。
渐变（グラデーション）
渐变 を使用して、円を描くこともできます。以下のコードのように、放射状グラデーションを設定することで、円を描くことができます。
.circle {
width: 100px;
height: 100px;
background-image: radial-gradient(circle at 50%, #F00 0%, #FFF 100%);
}
SVG は、ベクターグラフィックスを記述するための言語です。円を描く場合、以下のコードのように <circle> 要素を使用して円を記述することができます。
<svg width="100" height="100">
<circle cx="50" cy="50" r="50" fill="#F00" />
</svg>
この方法のメリットは、あらゆるブラウザで確実に円を描けること、およびサイズや色を簡単に変更できることです。デメリットとしては、HTML を記述する必要があることと、他の方法に比べてコードが長くなる場合があることです。
どの方法を選択するかは、状況によって異なります。シンプルな円を描きたい場合は、border-radius プロパティがおすすめです。画像を使用して円を装飾したい場合は、border-image プロパティがおすすめです。CSS のみで円を描きたい場合は、渐变 がおすすめです。あらゆるブラウザで確実に円を描きたい場合は、SVG がおすすめです。
css css-shapes
