実用JSスニペット 12選

<div class="bnto-dark" data-bnto-dark>
  <button type="button" class="tgl" aria-pressed="false">
    <span class="knob" aria-hidden="true"></span>ダークモード
  </button>
  <!-- .view = 色が切り替わる領域（実サイトでは body 全体などに） -->
  <div class="view">
    <b>ミニプレビュー</b>
    <p>切り替え結果はここに反映されます。</p>
  </div>
</div>

.bnto-dark {
  --c1: hsl(256 47% 54%);  /* アクセント色 */
  display: flex; flex-direction: column; gap: 10px;
}
.bnto-dark .tgl {
  display: inline-flex; align-items: center; gap: 9px;
  align-self: flex-start; padding: 6px 14px 6px 8px;
  background: #fff; border: 2px solid #DFE9F1;
  border-radius: 999px;
  font: inherit; font-weight: 800; cursor: pointer;
}
/* トグルのつまみ */
.bnto-dark .knob {
  position: relative; width: 34px; height: 20px;
  border-radius: 999px; background: #D8D0C0;
  transition: background .25s;
}
.bnto-dark .knob::after {
  content: ""; position: absolute; left: 2px; top: 2px;
  width: 16px; height: 16px; border-radius: 50%;
  background: #fff; transition: transform .25s;
}
.bnto-dark.is-dark .knob { background: var(--c1); }
.bnto-dark.is-dark .knob::after { transform: translateX(14px); }
/* 切り替わる側：is-dark で色を上書き */
.bnto-dark .view {
  background: #fff; color: #1D2A36;
  border: 2px solid #DFE9F1; border-radius: 14px;
  padding: 14px 16px;
  transition: background .3s, color .3s, border-color .3s;
}
.bnto-dark.is-dark .view {
  background: #252132; color: #F2EEE6;
  border-color: #3C3650;
}

// トグル＋localStorage保存＋OS設定（prefers-color-scheme）を初期値に
(function () {
  var KEY = 'bnto-demo-theme'; // サイト本体のキーと衝突しない名前に
  document.querySelectorAll('[data-bnto-dark]').forEach(function (box) {
    if (box.dataset.bntoInit) return;
    box.dataset.bntoInit = '1';
    var btn = box.querySelector('.tgl');
    var saved = null;
    try { saved = localStorage.getItem(KEY); } catch (e) {}
    var dark = saved ? saved === 'dark'
      : window.matchMedia('(prefers-color-scheme: dark)').matches;
    apply();
    btn.addEventListener('click', function () {
      dark = !dark;
      apply();
      try { localStorage.setItem(KEY, dark ? 'dark' : 'light'); } catch (e) {}
    });
    function apply() {
      box.classList.toggle('is-dark', dark);
      btn.setAttribute('aria-pressed', dark);
    }
  });
})();

<!-- data-show="3" ＝ 最初に見せる件数 -->
<div class="bnto-more" data-bnto-more data-show="3">
  <ul class="ls">
    <li>お知らせ 1</li>
    <li>お知らせ 2</li>
    <li>お知らせ 3</li>
    <li>お知らせ 4</li>
    <li>お知らせ 5</li>
    <li>お知らせ 6</li>
  </ul>
  <button type="button" class="btn">もっと見る</button>
</div>

.bnto-more {
  --c1: hsl(202 73% 50%);  /* ボタン色 */
  display: flex; flex-direction: column; gap: 10px;
}
.bnto-more .ls {
  list-style: none; margin: 0; padding: 0;
  background: #fff; border: 2px solid #DFE9F1;
  border-radius: 14px; overflow: hidden;
}
.bnto-more .ls li { padding: 10px 14px; }
.bnto-more .ls li + li { border-top: 2px solid #EAF2F8; }
/* hidden属性で隠した行を確実に非表示に */
.bnto-more .ls li[hidden], .bnto-more .btn[hidden] { display: none; }
.bnto-more .btn {
  align-self: center; padding: 8px 22px;
  background: var(--c1); color: #fff;
  border: none; border-radius: 999px;
  font: inherit; font-weight: 800; cursor: pointer;
}
.bnto-more .btn:hover { opacity: .85; }

// 4件目以降を隠し、ボタンに残り件数を表示。クリックで全件展開
(function () {
  document.querySelectorAll('[data-bnto-more]').forEach(function (box) {
    if (box.dataset.bntoInit) return;
    box.dataset.bntoInit = '1';
    var show = parseInt(box.dataset.show, 10) || 3;
    var items = box.querySelectorAll('.ls > li');
    var btn = box.querySelector('.btn');
    var rest = items.length - show;
    if (rest <= 0) { btn.hidden = true; return; }
    items.forEach(function (li, i) { li.hidden = i >= show; });
    btn.textContent = 'もっと見る（残り' + rest + '件）';
    btn.addEventListener('click', function () {
      items.forEach(function (li) { li.hidden = false; });
      btn.hidden = true;
    });
  });
})();

<!-- ボタンの data-filter とカードの data-cat を対応させる -->
<div class="bnto-filter" data-bnto-filter>
  <div class="btns">
    <button type="button" class="fb is-active" data-filter="all" aria-pressed="true">すべて</button>
    <button type="button" class="fb" data-filter="fruit" aria-pressed="false">くだもの</button>
    <button type="button" class="fb" data-filter="veg" aria-pressed="false">やさい</button>
  </div>
  <div class="cards">
    <span class="cd" data-cat="fruit">りんご</span>
    <span class="cd" data-cat="veg">トマト</span>
    <!-- カードを必要な数だけ -->
  </div>
</div>

.bnto-filter {
  --c1: hsl(150 58% 42%);  /* アクティブ色 */
  display: flex; flex-direction: column; gap: 12px;
}
.bnto-filter .btns { display: flex; gap: 6px; flex-wrap: wrap; }
.bnto-filter .fb {
  padding: 6px 14px;
  background: #fff; border: 2px solid #DFE9F1;
  border-radius: 999px;
  font: inherit; font-weight: 800; cursor: pointer;
}
.bnto-filter .fb.is-active {
  background: var(--c1); border-color: var(--c1); color: #fff;
}
.bnto-filter .cards { display: flex; flex-wrap: wrap; gap: 7px; }
.bnto-filter .cd {
  display: inline-block; padding: 8px 13px;
  background: #fff; border-radius: 11px;
  box-shadow: 0 3px 8px rgba(0,0,0,.07); font-weight: 700;
}
.bnto-filter .cd[hidden] { display: none; }

// data-filter とカードの data-cat を突き合わせて表示切替
(function () {
  document.querySelectorAll('[data-bnto-filter]').forEach(function (box) {
    if (box.dataset.bntoInit) return;
    box.dataset.bntoInit = '1';
    var btns = box.querySelectorAll('.fb');
    btns.forEach(function (btn) {
      btn.addEventListener('click', function () {
        var f = btn.dataset.filter;
        btns.forEach(function (b) {
          b.classList.toggle('is-active', b === btn);
          b.setAttribute('aria-pressed', b === btn);
        });
        box.querySelectorAll('[data-cat]').forEach(function (el) {
          el.hidden = f !== 'all' && el.dataset.cat !== f;
        });
      });
    });
  });
})();

<!-- 各行に data-name / data-price（比較用の生データ）を持たせる -->
<div class="bnto-sort" data-bnto-sort>
  <label class="lb">並び替え
    <select class="sel">
      <option value="name">名前順</option>
      <option value="price-asc">価格が安い順</option>
      <option value="price-desc">価格が高い順</option>
    </select>
  </label>
  <ul class="ls">
    <li data-name="みかん" data-price="480"><b>みかん</b><span>¥480</span></li>
    <li data-name="いちご" data-price="880"><b>いちご</b><span>¥880</span></li>
    <!-- 行を必要な数だけ -->
  </ul>
</div>

.bnto-sort {
  --c1: hsl(26 90% 55%);  /* アクセント色 */
  display: flex; flex-direction: column; gap: 10px;
}
.bnto-sort .lb { display: flex; align-items: center; gap: 8px; font-weight: 800; }
.bnto-sort .sel {
  flex: 1; padding: 7px 10px;
  background: #fff; border: 2px solid #DFE9F1;
  border-radius: 10px; font: inherit; cursor: pointer;
}
.bnto-sort .sel:focus { outline: none; border-color: var(--c1); }
.bnto-sort .ls {
  list-style: none; margin: 0; padding: 0;
  background: #fff; border: 2px solid #DFE9F1;
  border-radius: 14px; overflow: hidden;
}
.bnto-sort .ls li {
  display: flex; justify-content: space-between; gap: 10px;
  padding: 10px 14px;
}
.bnto-sort .ls li + li { border-top: 2px solid #EAF2F8; }
.bnto-sort .ls li span { color: var(--c1); font-weight: 800; }

// data-name / data-price を基準にDOMごと並べ替え
(function () {
  document.querySelectorAll('[data-bnto-sort]').forEach(function (box) {
    if (box.dataset.bntoInit) return;
    box.dataset.bntoInit = '1';
    var sel = box.querySelector('.sel');
    var list = box.querySelector('.ls');
    sel.addEventListener('change', function () {
      var v = sel.value;
      var items = Array.prototype.slice.call(list.children);
      items.sort(function (a, b) {
        if (v === 'name') return a.dataset.name.localeCompare(b.dataset.name, 'ja');
        var d = Number(a.dataset.price) - Number(b.dataset.price);
        return v === 'price-desc' ? -d : d;
      });
      items.forEach(function (li) { list.appendChild(li); });
    });
  });
})();

<div class="bnto-hilite" data-bnto-hilite>
  <input class="inp" type="search" placeholder="キーワードを入力" aria-label="リスト内を検索">
  <ul class="ls">
    <li>東京オフィスの営業時間</li>
    <li>大阪オフィスへのアクセス</li>
    <li>オンライン相談の予約方法</li>
    <!-- 行を必要な数だけ -->
  </ul>
</div>

.bnto-hilite {
  --c1: hsl(345 80% 55%);  /* ハイライト色 */
  display: flex; flex-direction: column; gap: 10px;
}
.bnto-hilite .inp {
  padding: 9px 13px;
  background: #fff; border: 2px solid #DFE9F1;
  border-radius: 11px; font: inherit;
}
.bnto-hilite .inp:focus { outline: none; border-color: var(--c1); }
.bnto-hilite .ls {
  list-style: none; margin: 0; padding: 0;
  background: #fff; border: 2px solid #DFE9F1;
  border-radius: 14px; overflow: hidden;
}
.bnto-hilite .ls li { padding: 9px 14px; }
.bnto-hilite .ls li + li { border-top: 2px solid #EAF2F8; }
.bnto-hilite mark {
  background: var(--c1); color: #fff;
  border-radius: 4px; padding: 0 3px;
}

// マッチ箇所を <mark> で包む（DOM操作なのでHTML注入の心配なし）
(function () {
  document.querySelectorAll('[data-bnto-hilite]').forEach(function (box) {
    if (box.dataset.bntoInit) return;
    box.dataset.bntoInit = '1';
    var inp = box.querySelector('.inp');
    var items = box.querySelectorAll('.ls li');
    items.forEach(function (li) { li.dataset.org = li.textContent; });
    inp.addEventListener('input', function () {
      var q = inp.value.trim();
      items.forEach(function (li) {
        var text = li.dataset.org;
        li.textContent = '';
        if (!q) { li.textContent = text; return; }
        var low = text.toLowerCase(), ql = q.toLowerCase();
        var from = 0, idx;
        while ((idx = low.indexOf(ql, from)) !== -1) {
          li.appendChild(document.createTextNode(text.slice(from, idx)));
          var m = document.createElement('mark');
          m.textContent = text.slice(idx, idx + q.length);
          li.appendChild(m);
          from = idx + q.length;
        }
        li.appendChild(document.createTextNode(text.slice(from)));
      });
    });
  });
})();

<table class="bnto-tsort" data-bnto-tsort>
  <thead>
    <tr><th>商品</th><th>価格</th><th>在庫</th></tr>
  </thead>
  <tbody>
    <tr><td>クッキー缶</td><td>¥1,800</td><td>12</td></tr>
    <tr><td>紅茶セット</td><td>¥2,400</td><td>5</td></tr>
    <!-- 行を必要な数だけ -->
  </tbody>
</table>

.bnto-tsort {
  --c1: hsl(187 63% 42%);  /* 見出し行の色 */
  border-collapse: separate; border-spacing: 0;
  background: #fff; border-radius: 12px; overflow: hidden;
  box-shadow: 0 5px 14px rgba(0,0,0,.07);
  text-align: left;
}
.bnto-tsort th {
  padding: 9px 12px;
  background: var(--c1); color: #fff;
  cursor: pointer; user-select: none; white-space: nowrap;
}
/* ソート状態のインジケーター */
.bnto-tsort th::after { content: " ↕"; opacity: .55; }
.bnto-tsort th.is-asc::after { content: " ↑"; opacity: 1; }
.bnto-tsort th.is-desc::after { content: " ↓"; opacity: 1; }
.bnto-tsort td { padding: 9px 12px; border-top: 2px solid #EAF2F8; }

// 見出しクリックで昇順⇄降順。数値は数値として比較（¥・カンマもOK）
(function () {
  document.querySelectorAll('[data-bnto-tsort]').forEach(function (table) {
    if (table.dataset.bntoInit) return;
    table.dataset.bntoInit = '1';
    var heads = table.querySelectorAll('thead th');
    var tbody = table.tBodies[0];
    heads.forEach(function (th, i) {
      th.addEventListener('click', function () {
        var asc = !th.classList.contains('is-asc');
        heads.forEach(function (o) {
          o.classList.remove('is-asc', 'is-desc');
          o.removeAttribute('aria-sort');
        });
        th.classList.add(asc ? 'is-asc' : 'is-desc');
        th.setAttribute('aria-sort', asc ? 'ascending' : 'descending');
        var rows = Array.prototype.slice.call(tbody.rows);
        rows.sort(function (a, b) {
          var x = a.cells[i].textContent.trim();
          var y = b.cells[i].textContent.trim();
          var nx = parseFloat(x.replace(/[^0-9.-]/g, ''));
          var ny = parseFloat(y.replace(/[^0-9.-]/g, ''));
          var r = (isNaN(nx) || isNaN(ny)) ? x.localeCompare(y, 'ja') : nx - ny;
          return asc ? r : -r;
        });
        rows.forEach(function (row) { tbody.appendChild(row); });
      });
    });
  });
})();

<!-- data-bnto-extlink の中の外部リンクだけ自動処理される -->
<div class="bnto-extlink" data-bnto-extlink>
  <ul class="ls">
    <li><a href="./about.html">内部リンク（変化なし）</a></li>
    <li><a href="https://example.com/">外部サイトへのリンク</a></li>
    <li><a href="https://developer.mozilla.org/ja/">MDN Web Docs</a></li>
  </ul>
</div>

.bnto-extlink {
  --c1: hsl(212 72% 50%);  /* リンク色 */
  background: #fff; border: 2px solid #DFE9F1;
  border-radius: 14px; padding: 6px 16px;
}
.bnto-extlink .ls { list-style: none; margin: 0; padding: 0; }
.bnto-extlink .ls li { padding: 9px 0; font-weight: 700; }
.bnto-extlink .ls li + li { border-top: 2px dashed #DFE9F1; }
.bnto-extlink a { color: var(--c1); text-decoration: none; }
.bnto-extlink a:hover { text-decoration: underline; }
/* JSが自動追加する ↗ アイコン */
.bnto-extlink .bnto-ext-ic {
  display: inline-block; margin-left: 3px; font-size: .85em;
}

// 外部ドメインのリンクだけ target・rel・アイコンを自動付与
(function () {
  document.querySelectorAll('[data-bnto-extlink]').forEach(function (area) {
    if (area.dataset.bntoInit) return;
    area.dataset.bntoInit = '1';
    area.querySelectorAll('a[href^="http"]').forEach(function (a) {
      if (a.host === location.host) return; // 自サイトは対象外
      a.target = '_blank';
      a.rel = 'noopener noreferrer';
      if (!a.querySelector('.bnto-ext-ic')) {
        var ic = document.createElement('span');
        ic.className = 'bnto-ext-ic';
        ic.setAttribute('aria-hidden', 'true');
        ic.textContent = '↗';
        a.appendChild(ic);
      }
    });
  });
})();

<!-- 中の年はJSが毎回「今年」に書き換える（JS無効時の保険に一応書いておく） -->
<footer class="bnto-year">
  <p class="cp">© <span data-bnto-year>2020</span> Your Company</p>
</footer>

/* 見た目は自由。ここではミニフッター風 */
.bnto-year .cp {
  margin: 0; padding: 12px 18px;
  background: #3A3547; color: #F2EEE6;
  border-radius: 12px; text-align: center;
  letter-spacing: .04em;
}

// HTMLに書いた年を、常に「今年」に書き換える（毎年の手動更新が不要に）
(function () {
  document.querySelectorAll('[data-bnto-year]').forEach(function (el) {
    if (el.dataset.bntoInit) return;
    el.dataset.bntoInit = '1';
    el.textContent = new Date().getFullYear();
  });
})();

<!-- data-offset="34" ＝ 固定ヘッダーの高さ(px)。この分だけ手前で止まる -->
<div class="bnto-smooth" data-bnto-smooth data-offset="34">
  <nav class="toc">
    <a href="#bnto-sec1">概要</a>
    <a href="#bnto-sec2">料金</a>
    <a href="#bnto-sec3">アクセス</a>
  </nav>
  <!-- .frame ＝ デモ用のスクロール枠。ページ全体で使うときはこの枠は不要 -->
  <div class="frame">
    <div class="hd">固定ヘッダー（34px）</div>
    <section class="sec" id="bnto-sec1"><b>概要</b><p>…</p></section>
    <section class="sec" id="bnto-sec2"><b>料金</b><p>…</p></section>
    <section class="sec" id="bnto-sec3"><b>アクセス</b><p>…</p></section>
  </div>
</div>

.bnto-smooth {
  --c1: hsl(230 62% 55%);  /* アクセント色 */
  display: flex; flex-direction: column; gap: 10px;
}
.bnto-smooth .toc { display: flex; gap: 6px; flex-wrap: wrap; }
.bnto-smooth .toc a {
  padding: 6px 13px;
  background: #fff; border: 2px solid #DFE9F1;
  border-radius: 999px; font-weight: 800;
  color: var(--c1); text-decoration: none;
}
.bnto-smooth .toc a:hover { border-color: var(--c1); }
/* デモ用のスクロール枠（ページ全体で使うときは不要） */
.bnto-smooth .frame {
  position: relative; height: 150px; overflow-y: auto;
  background: #fff; border: 2px solid #DFE9F1; border-radius: 14px;
}
/* 枠内の固定（sticky）ヘッダー ＝ 実サイトの固定ヘッダー役 */
.bnto-smooth .hd {
  position: sticky; top: 0; z-index: 1;
  box-sizing: border-box; height: 34px;
  display: flex; align-items: center; padding: 0 12px;
  background: var(--c1); color: #fff; font-weight: 800;
}
.bnto-smooth .sec { box-sizing: border-box; min-height: 130px; padding: 12px 14px; }
.bnto-smooth .sec + .sec { border-top: 2px solid #EAF2F8; }

// ページ内アンカーをなめらかにスクロール（固定ヘッダーぶん手前で停止）
(function () {
  var reduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
  document.querySelectorAll('[data-bnto-smooth]').forEach(function (root) {
    if (root.dataset.bntoInit) return;
    root.dataset.bntoInit = '1';
    var offset = parseInt(root.dataset.offset, 10) || 0; // 固定ヘッダーの高さ(px)
    // デモは .frame の枠内スクロール。ページ全体で使うときは
    // body に data-bnto-smooth を付ける（.frame がなければ window をスクロール）
    var frame = root.querySelector('.frame');
    root.querySelectorAll('a[href^="#"]').forEach(function (a) {
      a.addEventListener('click', function (e) {
        var id = a.getAttribute('href').slice(1);
        var target = id && document.getElementById(id);
        if (!target) return; // 行き先がなければブラウザ標準に任せる
        e.preventDefault();
        var top = frame
          ? target.offsetTop - offset
          : target.getBoundingClientRect().top + window.pageYOffset - offset;
        // 動きを減らす設定では behavior: 'auto'（即時移動）に
        (frame || window).scrollTo({ top: top, behavior: reduced ? 'auto' : 'smooth' });
        // ページ全体運用ではURLのハッシュも更新（戻るボタン・URL共有に対応）
        if (!frame) history.pushState(null, '', '#' + id);
      });
    });
  });
})();

<!-- ボタンに data-bnto-printbtn を付けるだけ。.no-print ＝ 印刷時に隠す -->
<div class="bnto-print">
  <button type="button" class="pb no-print" data-bnto-printbtn>このページを印刷</button>
  <p class="no-print nt">この注記は印刷には含まれません。</p>
</div>

.bnto-print {
  --c1: hsl(168 60% 40%);  /* ボタン色 */
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.bnto-print .pb {
  padding: 9px 24px;
  background: var(--c1); color: #fff;
  border: none; border-radius: 999px;
  font: inherit; font-weight: 800; cursor: pointer;
}
.bnto-print .pb:hover { opacity: .85; }
.bnto-print .nt {
  margin: 0; padding: 10px 14px;
  background: #fff; border: 2px dashed #DFE9F1;
  border-radius: 12px; color: #5A6B7A;
}
/* 印刷用CSS：.no-print を付けた要素は印刷時に非表示 */
@media print {
  .no-print { display: none !important; }
}

// クリックでブラウザの印刷ダイアログを開くだけ（印刷時の見た目はCSSが担当）
(function () {
  document.querySelectorAll('[data-bnto-printbtn]').forEach(function (btn) {
    if (btn.dataset.bntoInit) return;
    btn.dataset.bntoInit = '1';
    btn.addEventListener('click', function () { window.print(); });
  });
})();

<!-- data-target ＝ 適用先セレクタ（省略時は html ＝ ページ全体） -->
<div class="bnto-fontsize" data-bnto-fontsize data-target="#bnto-fs-sample">
  <div class="btns">
    <button type="button" class="fs" data-size="s" aria-pressed="false">小</button>
    <button type="button" class="fs" data-size="m" aria-pressed="true">標準</button>
    <button type="button" class="fs" data-size="l" aria-pressed="false">大</button>
  </div>
  <!-- デモ用の適用先。実サイトでは data-target を省略して html に適用 -->
  <div class="smp" id="bnto-fs-sample">
    <b>サンプル文章</b>
    <p>ボタンを押すと文字サイズが切り替わります。</p>
  </div>
</div>

.bnto-fontsize {
  --c1: hsl(276 55% 52%);  /* 選択中のボタン色 */
  display: flex; flex-direction: column; gap: 10px;
}
.bnto-fontsize .btns { display: flex; gap: 6px; flex-wrap: wrap; }
.bnto-fontsize .fs {
  padding: 6px 14px;
  background: #fff; border: 2px solid #DFE9F1;
  border-radius: 999px;
  font: inherit; font-weight: 800; cursor: pointer;
}
/* 選択中：aria-pressed をそのままスタイルに利用 */
.bnto-fontsize .fs[aria-pressed="true"] {
  background: var(--c1); border-color: var(--c1); color: #fff;
}
/* デモ用のサンプル文章ボックス（中の文字は em で組む） */
.bnto-fontsize .smp {
  background: #fff; border: 2px solid #DFE9F1;
  border-radius: 14px; padding: 14px 16px;
}
.bnto-fontsize .smp b { display: block; font-size: 1em; margin-bottom: 4px; }
.bnto-fontsize .smp p { margin: 0; font-size: .92em; line-height: 1.7; }

// 小/標準/大の3段階。選択はlocalStorageに保存し、再訪時に復元
(function () {
  document.querySelectorAll('[data-bnto-fontsize]').forEach(function (box) {
    if (box.dataset.bntoInit) return;
    box.dataset.bntoInit = '1';
    var target = document.querySelector(box.dataset.target || 'html'); // 適用先（省略時はページ全体）
    var key = box.dataset.key || 'bnto-fontsize'; // 保存キー（data-key で変更可）
    var sizes = { s: '87.5%', m: '100%', l: '112.5%' };
    var btns = box.querySelectorAll('button[data-size]');
    function apply(size) {
      if (!sizes[size]) size = 'm';
      target.style.fontSize = sizes[size];
      btns.forEach(function (b) {
        b.setAttribute('aria-pressed', b.dataset.size === size ? 'true' : 'false');
      });
      try { localStorage.setItem(key, size); } catch (e) {}
    }
    btns.forEach(function (b) {
      b.addEventListener('click', function () { apply(b.dataset.size); });
    });
    var saved = 'm';
    try { saved = localStorage.getItem(key) || 'm'; } catch (e) {}
    apply(saved);
  });
})();

<!-- 各 td の data-label ＝ カード表示時の見出しラベル -->
<div class="bnto-tablecard" data-bnto-tablecard>
  <button type="button" class="bt-toggle" aria-pressed="false">カード表示にする</button>
  <table>
    <thead>
      <tr><th>プラン</th><th>料金</th><th>サポート</th></tr>
    </thead>
    <tbody>
      <tr><td data-label="プラン">ライト</td><td data-label="料金">¥980/月</td><td data-label="サポート">メール</td></tr>
      <tr><td data-label="プラン">スタンダード</td><td data-label="料金">¥2,480/月</td><td data-label="サポート">メール＋電話</td></tr>
      <!-- 行を必要な数だけ -->
    </tbody>
  </table>
</div>

.bnto-tablecard {
  --c1: hsl(14 78% 55%);  /* 見出し行の色 */
  display: flex; flex-direction: column; gap: 10px;
}
.bnto-tablecard .bt-toggle {
  align-self: flex-start; padding: 6px 14px;
  background: #fff; border: 2px solid #DFE9F1;
  border-radius: 999px;
  font: inherit; font-weight: 800; cursor: pointer;
}
.bnto-tablecard.is-cards .bt-toggle {
  background: var(--c1); border-color: var(--c1); color: #fff;
}
/* 通常のテーブル表示 */
.bnto-tablecard table {
  width: 100%; border-collapse: separate; border-spacing: 0;
  background: #fff; border-radius: 12px; overflow: hidden;
  box-shadow: 0 5px 14px rgba(0,0,0,.07);
}
.bnto-tablecard th {
  padding: 8px 10px; text-align: left; white-space: nowrap;
  background: var(--c1); color: #fff;
}
.bnto-tablecard td { padding: 8px 10px; border-top: 2px solid #EAF2F8; }
/* is-cards：tr をカード化し、td::before で見出しラベルを表示 */
.bnto-tablecard.is-cards table { display: block; background: none; box-shadow: none; }
.bnto-tablecard.is-cards thead { display: none; }
.bnto-tablecard.is-cards tbody,
.bnto-tablecard.is-cards tr,
.bnto-tablecard.is-cards td { display: block; }
.bnto-tablecard.is-cards tr {
  background: #fff; border: 2px solid #DFE9F1;
  border-radius: 12px; padding: 4px 12px;
}
.bnto-tablecard.is-cards tr + tr { margin-top: 8px; }
.bnto-tablecard.is-cards td {
  display: flex; justify-content: space-between; gap: 10px;
  padding: 7px 0; border-top: 0;
}
.bnto-tablecard.is-cards td + td { border-top: 2px dashed #EAF2F8; }
.bnto-tablecard.is-cards td::before {
  content: attr(data-label); font-weight: 800; color: #5A6B7A;
}

// ボタンで is-cards クラスを切替（カード化そのものはCSSが担当）
(function () {
  document.querySelectorAll('[data-bnto-tablecard]').forEach(function (box) {
    if (box.dataset.bntoInit) return;
    box.dataset.bntoInit = '1';
    var btn = box.querySelector('.bt-toggle');
    btn.addEventListener('click', function () {
      var cards = box.classList.toggle('is-cards');
      btn.textContent = cards ? '表に戻す' : 'カード表示にする';
      btn.setAttribute('aria-pressed', cards);
    });
  });
})();