【Cocoonカスタマイズ】「タブ」ブロックのタブ切り替えをスライドスイッチ風にアニメーションさせる方法

はじめに
完成イメージ
実装手順
さいごに

はじめに

「タブ」ブロックは、見た目が洗練されていて、情報をコンパクトにまとめられる便利なUIパーツです。
ただし、デフォルトのタブ切り替えでは少し物足りないと感じる方も多いのではないでしょう。

そこで、タブ切り替え時にスライドスイッチのようなアニメーションを実装します。

この記事では、この方法について説明します。

完成イメージ

ホワイトスネイク
C-MOON
メイド・イン・ヘブン

生物の記憶とスタンド能力を、CDのような形状の「DISC」にして取り出す、能力を持つ。

ホワイトスネイクと、緑色の赤ちゃんが融合してできたスタンド。半径約3km以内にある物体の重力の方向を、本体のプッチ神父を中心に、逆転させる能力を持つ。

C-MOONが進化したスタンド。全世界の時を、加速させる能力を持つ。

実装手順

以下のコードをstyle.cssに追加します。

:root {
  --active-color: #ff0000;
  --back-color: #eee;
  --tab-count: 3;
  --tab-height: 40px;
}

/* タブブロック全体 */
.wp-block-cocoon-blocks-tab {
  .tab-label-group {
    background-color: var(--back-color);
    border-radius: 100px;
    display: flex;
    height: var(--tab-height);
    position: relative;
    z-index: 1;

    /* スライドする背景 */
    &::before {
      background-color: var(--active-color);
      border-radius: 100px;
      bottom: 0;
      content: '';
      height: 100%;
      left: 0;
      position: absolute;
      transform: translateX(0%);
      transition: all 0.3s linear;
      width: calc(100% / var(--tab-count));
      z-index: -1;
    }

    /* スライド位置の制御（アクティブタブの検出） */
    &:has(.tab-label-1.is-active)::before {
      transform: translateX(100%);
    }

    &:has(.tab-label-2.is-active)::before {
      transform: translateX(200%);
    }
  }

  /* 各タブ */
  .tab-label {
    align-content: center;
    background-color: unset;
    border: none;
    cursor: pointer;
    flex: 1;
    padding: 0;
    text-align: center;
    z-index: 2;

    /* アクティブなタブ状態 */
    &.is-active {
      background-color: unset;
      transition: all 0.3s linear;
    }
  }
}

さいごに

今回紹介した方法を使えば、「タブ」ブロックにスライドスイッチ風のアニメーションを簡単に追加することができます。
視覚的な魅力を高めつつ、ユーザー体験を向上させるデザインを実現できるでしょう。