公開日: 2025-07-23
タグ: CSS
著者: ダーシノ

sibling-indexとsibling-countで作るリングメニュー

sibling-indexとsibling-countを使うと、CSSで兄弟要素の全数とその中での位置を取得できる。

.item {
  width: calc(sibling-count() * 100px);
  margin-inline-start: calc(sibling-index() * 10px);
}

要素の全数と位置を取得できるので、たとえば角度の計算が必要なリングメニューのようなUIを簡単に実装できる。

<div class="ring-menu" role="menu">
  <div class="item" role="menuitem">1</div>
  <div class="item" role="menuitem">2</div>
  <div class="item" role="menuitem">3</div>
  <div class="item" role="menuitem">4</div>
  <div class="item" role="menuitem">5</div>
  ...
</div>

.ring-menu {
  position: relative; 
  width: 300px;
  height: 300px;

  .item {
    position: absolute;
    background-color: #333;
    color: #eee;
    inline-size: 50px;
    block-size: 50px;
    border-radius: 50%;
    text-align: center;
    align-content: center;

    --angle: calc(360deg / sibling-count() * (sibling-index() - 1));

    --x: var(calc(50% + sin(var(--angle)) * 100px));
    --y: var(calc(50% + cos(var(--angle)) * 100px));

    top: var(--y);
    left: var(--x);
  }
}

sibling-indexとsibling-countで作るリングメニュー

デモ