CSSで簡単に円を作る方法と使い方を解説！

はじめに
●CSSで円を作る方法
●円の使い方
- ① ボタンやアイコンの装飾
- ② ローディングアニメーションの表示
まとめ

はじめに

CSSは、ウェブページのデザインやレイアウトをコントロールするためのスタイルシート言語です。

このツールを使えば、HTMLの各要素に対して色付けやテキストの大きさ、配置などの詳細なスタイリングを行うことができます。

今回の記事では、CSSを利用してシンプルな円形のデザインを作成し、その応用方法について触れていきます。

●CSSで円を作る方法

CSSで円を作る方法には、いくつかの方法があります。

まずは、代表的な方法を紹介します。

① border-radiusプロパティを使う方法

border-radiusプロパティは、ボーダーの角丸を指定するプロパティです。

このプロパティを使うと、正方形の要素を丸くすることができます。

これを応用して、円を作ることができます。

border-radiusプロパティを使った円を作るためのCSSコードです。

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

このCSSコードでは、要素の幅と高さを100pxに設定し、border-radiusプロパティに50%を指定しています。

50%という値は、要素の幅と高さの半分を表しています。

つまり、正方形の要素を丸くするために、幅と高さの半分を角丸にします。

また、背景色として赤色を指定しています。

このCSSコードをHTML文書に適用すると、赤い円が表示されます。

② transformプロパティを使う方法

transformプロパティは、要素を変形するためのプロパティです。

このプロパティを使うと、円を作ることができます。

transformプロパティを使った円を作るためのCSSコードです。

.circle {
  width: 100px;
  height: 100px;
  background-color: red;
  border-radius: 50%;
  transform: scale(1);
}

このCSSコードでは、要素の幅と高さを100pxに設定し、border-radiusプロパティに50%を指定しています。

また、背景色として赤色を指定しています。そして、transformプロパティにscale(1)を指定しています。

scale()関数は、要素の大きさを変更するための関数で、引数に数値を指定することで、要素の拡大・縮小ができます。

ここでは、scale(1)を指定しているため、要素の大きさはそのままに、円形に変形します。

このCSSコードをHTML文書に適用すると、赤い円が表示されます。

③ ::before擬似要素を使う方法

::before擬似要素は、要素の最初の子要素として追加される要素です。

この擬似要素を使うことで、円を作ることができます。

::before擬似要素を使った円を作るためのCSSコードです。

.circle::before {
  content: "";
  display: block;
  padding-bottom: 100%;
  border-radius: 50%;
  background-color: red;
}

このCSSコードでは、.circle要素に対して::before擬似要素を適用しています。

::before擬似要素には、contentプロパティに空の文字列を指定し、displayプロパティにblockを指定しています。

また、padding-bottomプロパティに100%を指定して、高さを要素の幅と同じにします。

border-radiusプロパティに50%を指定して、丸い形にします。

そして、背景色として赤色を指定しています。

このCSSコードをHTML文書に適用すると、赤い円が表示されます。

以上の3つの方法で、CSSで円を作ることができます。

それぞれの方法によって、異なるコードが必要になるため、使い分けることが大切です。

●円の使い方

CSSで作った円は、さまざまな場面で使うことができます。ここでは、代表的な使い方を紹介します。

① ボタンやアイコンの装飾

円は、ボタンやアイコンの装飾として使われることがあります。

例えば、次のようなCSSコードで、ボタンに円を追加することができます。

.button {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: red;
  color: white;
  font-size: 24px;
  text-align: center;
  line-height: 100px;
  text-decoration: none;
}

このCSSコードでは、ボタンに対して幅と高さを100pxに設定し、border-radiusプロパティに50%を指定して、円形にします。

また、背景色として赤色を指定しています。さらに、テキストの色を白色に変更し、フォントサイズを24pxに設定します。

テキストの位置を中央揃えにし、行の高さを100pxに設定します。

そして、テキストの下線を消すためにtext-decorationプロパティにnoneを指定します。

このCSSコードをHTML文書に適用すると、赤い円の中に白いテキストが表示されたボタンが表示されます。

② ローディングアニメーションの表示

円は、ローディングアニメーションの表示にも使われることがあります。

CSSアニメーションを使って、円を回転させるローディングアニメーションを実装した例です。

.loading {
  width: 50px;
  height: 50px;
  border: 5px solid rgba(0, 0, 0, 0.1);
  border-top-color: #333;
  border-radius: 50%;
  animation: rotate 1s linear infinite;
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

このCSSコードでは、.loading要素に対して幅と高さを50pxに設定し、borderプロパティに5pxの幅と透明度が0.1の黒色の枠線を指定しています。

border-top-colorプロパティに#333を指定して、上部の枠線の色を指定します。

また、border-radiusプロパティに50%を指定して、円形にします。

そして、animationプロパティにrotate 1s linear infiniteを指定して、rotateという名前のキーフレームアニメーションを適用します。

キーフレームアニメーションは、アニメーションの動きを細かく設定できる方法です。

ここでは、rotateという名前のキーフレームアニメーションを定義して、transformプロパティにrotate()関数を指定して、要素を回転させるように設定しています。

キーフレームアニメーションは、0%から100%までの時間を指定し、それぞれの時間における要素のスタイルを指定します。

ここでは、0%の時点では要素を0度回転させ、100%の時点では要素を360度回転させるように設定しています。

このCSSコードをHTML文書に適用すると、黒い枠線の中に白い円が表示され、回転しながらローディングアニメーションが表示されます。

以上のように、CSSで作った円は、装飾やアニメーションの表示など、様々な場面で活用できます。