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

CSSで簡単に円を作る方法と使い方!初心者でもわかるサンプルコードと応用例を紹介CSS
この記事は約7分で読めます。

 

【サイト内のコードはご自由に個人利用・商用利用いただけます】

この記事では、プログラムの基礎知識を前提に話を進めています。

説明のためのコードや、サンプルコードもありますので、もちろん初心者でも理解できるように表現してあります。

基本的な知識があればカスタムコードを使って機能追加、目的を達成できるように作ってあります。

※この記事は、一般的にプロフェッショナルの指標とされる『実務経験10,000時間以上』を凌駕する現役のプログラマチームによって監修されています。

サイト内のコードを共有する場合は、参照元として引用して下さいますと幸いです

※Japanシーモアは、常に解説内容のわかりやすさや記事の品質に注力しております。不具合、分かりにくい説明や不適切な表現、動かないコードなど気になることがございましたら、記事の品質向上の為にお問い合わせフォームにてご共有いただけますと幸いです。
(送信された情報は、プライバシーポリシーのもと、厳正に取扱い、処分させていただきます。)

はじめに

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で作った円は、装飾やアニメーションの表示など、様々な場面で活用できます。

まとめ

CSSを使って円を作る方法とその使い方について解説しました。

CSSは、HTML文書の見た目を装飾するための言語であり、円形の要素を作ることもできます。

また、円は、ボタンやアイコンの装飾やローディングアニメーションの表示など、様々な場面で活用できます。

以上の方法を覚えて、自分なりのデザインを作ってみましょう!