CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSで空の円を作成する方法をわかりやすく解説

CSSで空の円（丸いドットや中空の円）を作成するには、border-radiusプロパティを活用します。正方形の要素に対して border-radius: 50% を指定することで、完全な円形に変形できます。さらに、背景色を設定すれば塗りつぶしの円に、背景を透明にして border を使えば中空の円（リング状）も簡単に表現できます。

以下に、複数の円形ドットを並べて表示する具体的なコード例を示します。

サンプルコード

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
    body {
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
        margin: 20px;
    }
    .circle {
        height: 25px;
        width: 25px;
        background-color: rgb(52, 15, 138);
        border-radius: 50%;
        display: inline-block;
    }
    div :nth-of-type(2n) {
        background-color: red;
    }
</style>
</head>
<body>
<h1>Round dots example</h1>
<div>
<span class="circle"></span>
<span class="circle"></span>
<span class="circle"></span>
<span class="circle"></span>
</div>
</body>
</html>

コードのポイント

  • height と width：同じ値を指定して正方形を作成します。この大きさがそのまま円の直径になります。
  • border-radius: 50%：四隅の角を完全に丸め、正方形を円形に変える重要な指定です。
  • display: inline-block：spanなどのインライン要素でもサイズ指定が反映され、横並びに配置できるようにします。
  • :nth-of-type(2n)：偶数番目の要素だけ背景色を赤に変更し、色を交互に切り替えています。

実行結果

上記のコードを実行すると、紫と赤の円形ドットが交互に並んで表示されます。

CSSで空の円を作成する方法をわかりやすく解説

応用：中空の円（輪郭のみの円）を作るには

塗りつぶしなしの中空の円にしたい場合は、background-color を transparent にし、代わりに border: 2px solid #341f8a; のように枠線を指定します。これにより、輪郭だけの空の円を描くことができます。

  1. CSSを使ってクーポンを作成する方法【サンプルコード付き】

    CSSを活用すれば、破線の枠やプロモーションコード、有効期限などを含んだ見栄えの良いクーポンデザインを、HTMLとCSSだけで簡単に作成できます。本記事では、実際に動作するサンプルコードを交えて、クーポンの実装方法をわかりやすく解説します。 クーポン作成のサンプルコード 以下のコードは、店舗名・商品画像・キャッチコピー・割引コード・有効期限を含むクーポンを作成するものです。破線のボーダー（dashed）を使うことで、切り取り線のある本物のクーポンらしい雰囲気を演出しています。 <!DOCTYPE html> <html> <head> <meta na

  2. CSSで矢印を作成する方法！borderとrotateを組み合わせた4方向矢印の実装テクニック

    CSSでは、画像やアイコンフォント、外部ライブラリに頼らなくても、border（境界線）とtransform: rotate()を組み合わせるだけで、上下左右どの方向の矢印でも簡単に作成できます。境界線でL字型の角を作り、それを回転させるのが基本的な考え方です。 サンプルコード <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style>