パーツ番号 02-17-22 ・ JavaScript使用

カラーサイクル連動見出しセット

クリックするたびに、h2・h3・h4の文字色が3レベル同時に次の配色セットへ切り替わる。1階層だけでなくセット全体が連動して色を変えるので、複数パターンの配色を1つの見出し体系で見比べられる。

clickjs

プレビュー

ソースコード

HTML

<div class="d02-17-22-stage">
          <div class="set">
            <p class="lv2">お手続き案内</p>
            <p class="lv3">必要書類の準備</p>
            <p class="lv4">本人確認書類</p>
          </div>
          <button type="button" class="d02-17-22-btn">クリックで配色を切替</button>
        </div>

CSS

.d02-17-22 .d02-17-22-stage{ width:100%; }
        .d02-17-22 .set{ width:100%; display:flex; flex-direction:column; gap:14px; }
        .d02-17-22 .lv2,.d02-17-22 .lv3,.d02-17-22 .lv4{ margin:0; transition:color .4s ease; }
        .d02-17-22 .lv2{ font-size:22px; font-weight:800; color:#1d4ed8; }
        .d02-17-22 .lv3{ font-size:17px; font-weight:700; color:#3b82f6; padding-left:14px; }
        .d02-17-22 .lv4{ font-size:14px; font-weight:700; color:#60a5fa; padding-left:28px; }
        .d02-17-22 .d02-17-22-btn{ display:block; margin:14px auto 0; padding:8px 18px; font-size:12px; font-weight:700; letter-spacing:.06em; color:#1a2333; background:#fff; border:1.5px solid #cbd5e1; border-radius:20px; cursor:pointer; }

JavaScript

(function(){
        var lv2 = document.querySelector('#item-02-17-22 .lv2');
        var lv3 = document.querySelector('#item-02-17-22 .lv3');
        var lv4 = document.querySelector('#item-02-17-22 .lv4');
        var btn = document.querySelector('#item-02-17-22 .d02-17-22-btn');
        if(!lv2 || !lv3 || !lv4 || !btn) return;
        var palettes = [
          ['#1d4ed8', '#3b82f6', '#60a5fa'],
          ['#be123c', '#e11d48', '#fb7185'],
          ['#047857', '#10b981', '#6ee7b7'],
          ['#b45309', '#f59e0b', '#fcd34d']
        ];
        var idx = 0;
        btn.addEventListener('click', function(){
          idx = (idx + 1) % palettes.length;
          var p = palettes[idx];
          lv2.style.color = p[0];
          lv3.style.color = p[1];
          lv4.style.color = p[2];
        });
      })();

クラス名 .d02-17-22 は本ライブラリ内での識別用です。複数のパーツを同じページで使う場合は、重複しないよう名前を変更してください。