Live Demo
タブにホバーすると強調され、クリックで本文が切り替わります。
Source Code
必要なコードをコピーして実装に利用できます。
HTML
<div class="tbx-1058"><input type="radio" id="tbx-1058-a" name="tbx-1058-tab" checked><input type="radio" id="tbx-1058-b" name="tbx-1058-tab"><input type="radio" id="tbx-1058-c" name="tbx-1058-tab"><div class="tbx-1058__tabs" role="group" aria-label="製品情報の切り替え"><label for="tbx-1058-a">特徴</label><label for="tbx-1058-b">仕様</label><label for="tbx-1058-c">保証</label></div><div class="tbx-1058__panel tbx-1058__a"><b>すっきりした操作性</b><p>基本機能をシンプルにまとめた製品です。</p></div><div class="tbx-1058__panel tbx-1058__b"><b>製品仕様</b><p>重量 420g / 幅 120mm / 高さ 80mm</p></div><div class="tbx-1058__panel tbx-1058__c"><b>サポート</b><p>購入から1年間の保証付きです。</p></div></div>
CSS
.tbx-1058{font:12px/1.5 system-ui;width:min(278px,100%);color:#345064}.tbx-1058>input{position:absolute;opacity:0;width:1px;height:1px}.tbx-1058__tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:3px;padding:4px;background:#e9eff2;border-radius:8px}.tbx-1058__tabs label{text-align:center;padding:10px 2px;cursor:pointer;font-weight:700;font-size:11px;border-radius:6px;color:#647b89;transition:background .2s,color .2s,transform .2s}.tbx-1058__tabs label:is(:hover,:focus-visible){background:#d1e9e8;color:#226b70;transform:translateY(-1px)}
.tbx-1058:has(#tbx-1058-a:checked) label[for=tbx-1058-a],.tbx-1058:has(#tbx-1058-b:checked) label[for=tbx-1058-b],.tbx-1058:has(#tbx-1058-c:checked) label[for=tbx-1058-c]{background:white;color:#1d6571;box-shadow:0 2px 6px #254d6418}.tbx-1058:has(input:focus-visible) .tbx-1058__tabs{outline:2px solid #d4a46e;outline-offset:2px}
.tbx-1058__panel{display:none;padding:21px 12px 12px;min-height:93px}.tbx-1058__panel b{font-size:12px}.tbx-1058__panel p{font-size:11px;color:#748593;line-height:1.65;margin:7px 0 0}.tbx-1058:has(#tbx-1058-a:checked) .tbx-1058__a,.tbx-1058:has(#tbx-1058-b:checked) .tbx-1058__b,.tbx-1058:has(#tbx-1058-c:checked) .tbx-1058__c{display:block}
@media(prefers-reduced-motion:reduce){.tbx-1058__tabs label{transition:none}}
How to Use
HTMLを設置し、CSSを既存サイトのスタイルシートに追加します。既存クラスとの競合を避け、サイトの配色・サイズに合わせて調整してください。
Use Case
Product / Services
Technical Notes
ホバー非対応端末でも主要操作ができるようにし、キーボードフォーカス時の表示と動き軽減設定を確認してください。
Mobile：ホバーのない端末ではタップ・選択による操作が可能な部分を設けています。
Browser：最新のChrome・Firefox・Safari・Edgeでの利用を想定。:has()を使う素材は対応ブラウザが必要です。
Reduced Motion：prefers-reduced-motion: reduce に対応。