CSSで円を作る方法

CSSで円を作る方法を紹介します。

画像を使ってもいいのですが、CSSを使用することで色や大きさを自由自在に調整することができます。また、画像を使った場合と比較して、容量も少し削減することができるので、Webサイトを少しだけ軽量化することもできます。

割とよく使う基本的なテクニックなので、覚えておいて損はないです。コピペで簡単に実装できるので、ぜひ実際に試してみてください。

CSSで円を作るサンプルコード

<div class="circle"></div>

.circle {
  width: 100px; height: 100px; /* 円のサイズ */
  background: #00ba88; /* 円の色 */
  border-radius: 50%;
}

border-radiusを50%に指定してあげれば、簡単に円を作ることができます。
きれいな正円を作りたい際は幅と高さは同じ値に設定しましょう。

今回は単純に円を作る方法を紹介しましたが、これを応用して円の中に文字を入れる方法も紹介しています。