CSSだけで要素を円周上に配置する方法【サンプルコード有】- Web Design Note

円周上に複数の要素を配置する方法【CSSだけ・サンプルコード有】

2025年5月20日

#CSS
#HTML
#Tips

複数の要素を円周上に等間隔で配置したいこと、ありませんか？あります…よね？この記事ではJavaScriptを使わずに実装できる方法をできるだけわかりやすく解説しました。

CSSのみでつくるデザインはコードがシンプルでページの読み込みが軽いのもメリットです。コピペで使えるサンプルコードも紹介しているので、参考になれば嬉しいです！

コードの全体像

まずは完成形のサンプルコードをこちらでご紹介します。コードの詳細については後ほど説明していきますね。

今回は例として、円周上に5つの小さな円が等間隔に並ぶデザインを作成しました。

See the Pen Circular Positioning Using CSS Custom Properties by Aizawa Web Design (@AizawaWebDesign) on CodePen.

HTMLの詳細

HTMLでは全体を囲む枠<div class=”circle-wrapper”>と円の部分<div class=”circle-container”>、そして円周上に並べたい要素<div class=”circle-item”>をマークアップしています。

<div class="circle-wrapper">
  <div class="circle-container" style="--radius: 100">
    <div class="circle-item" style="--angle: 72"></div>
    <div class="circle-item" style="--angle: 144"></div>
    <div class="circle-item" style="--angle: 216"></div>
    <div class="circle-item" style="--angle: 288"></div>
    <div class="circle-item" style="--angle: 360"></div>
  </div>
</div>

HTML

ミソとなるのは「style=”–**: ++”」の部分ですね！このあたりをもう少し詳しく見ていきます。

カスタムプロパティ（CSS変数）の指定

今回の例ではカスタムプロパティを使っています。カスタムプロパティとは、使い回しができて、かつ自分で好きな名前を付けられる値です。CSSで使用します。

CSS側で書いてもよいのですが、今回はHTML側で指定しています。例えば.circle-containerが複数あってそれぞれで変数の値を変えたいときには、以下のようにHTMLに直接書くと管理がしやすいです！

<div class="circle-container" style="--radius: 100"></div>
<div class="circle-container" style="--radius: 150"></div>

HTML

ここでは変数に「–radius」という名前を付けています。このあとCSSで「–radius」を円の半径として使っていきます。

「–angle」部分の考え方

HTML内でもう１箇所変数が指定されていますね。それが「–angle」の部分です。この変数は複数の要素を円周上で等間隔に並べるために使います。

360度を要素の数で割って（今回だと360/5=72）、要素一つひとつをその角度ずつずらして配置することで、等間隔に配置できるという仕組みです。

なので、もし配置したい要素が6つに増えた場合は360/6=60度ずつずらすので、以下のように指定すればOKです。

<div class="circle-item" style="--angle: 60"></div>
<div class="circle-item" style="--angle: 120"></div>
<div class="circle-item" style="--angle: 180"></div>
<div class="circle-item" style="--angle: 240"></div>
<div class="circle-item" style="--angle: 300"></div>
<div class="circle-item" style="--angle: 360"></div>

HTML

CSSの詳細

続いてCSSを見ていきましょう！

円を画面の中央に配置

.circle-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
}

CSS

全体を囲む.circle-wrapperを調整することで、円の配置を決めます。この例では画面中央に円がくるよう指定しました。

.circle-wrapperをflexboxにして中身を縦横いずれも中央に配置
widthとheightには画面いっぱいの値を指定して、どのような画面サイズでも円が中央へくるように

円をつくる

.circle-container {
  border: #222222 1px solid;
  border-radius: 50%;
  width: calc(var(--radius) * 1px);
  height: calc(var(--radius) * 1px);
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

CSS

次は要素を並べるベースとなる円を調整します。

border-radius: 50%;で正円をつくる
calc(var(–radius) * 1px)で、HTMLで指定された「–radius」の値を半径として使う

calc()は計算のできる関数で、width: calc(var(–radius)*1px);は、「–radius」というカスタムプロパティに1pxをかけてwidthのサイズを計算してくださいという意味です。

円周上に要素を並べる

.circle-item {
  /* 計算用に角度を調整（-90度は上を基準にするため） */
  --angle-adjusted: calc(var(--angle) * 1deg - 90deg);

  /* X座標はcosで計算 */
  --x-position: calc(cos(var(--angle-adjusted)) * var(--radius) * 0.5px);

  /* Y座標はsinで計算 */
  --y-position: calc(sin(var(--angle-adjusted)) * var(--radius) * 0.5px);

  background-color: #4682B4;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  position: absolute;
  transform-origin: center center;

  /* 計算したX・Y座標に丸を移動 */
  transform: translate(var(--x-position), var(--y-position));
}