Live Demo
凡例へホバーして系列を強調、クリックして選択できます。
Source Code
必要なコードをコピーして実装に利用できます。
HTML
<fieldset class="tbx-1067"><legend>流入チャネル（例）</legend>
<div class="tbx-1067__chart" role="img" aria-label="検索 68、SNS 43、直接流入 29（架空の数値）"><span class="tbx-1067__bar tbx-1067__bar--a" title="検索 68">68</span><span class="tbx-1067__bar tbx-1067__bar--b" title="SNS 43">43</span><span class="tbx-1067__bar tbx-1067__bar--c" title="直接 29">29</span></div>
<div class="tbx-1067__legend"><label><input name="tbx-1067-channel" type="radio" value="search" checked><span>検索</span></label><label><input name="tbx-1067-channel" type="radio" value="social"><span>SNS</span></label><label><input name="tbx-1067-channel" type="radio" value="direct"><span>直接</span></label></div>
</fieldset>
CSS
.tbx-1067{width:min(306px,100%);padding:12px 14px 13px;margin:0;min-width:0;border:1px solid #d9e3e7;border-radius:10px;background:#fff;font:11px/1.35 system-ui,sans-serif;color:#375466}.tbx-1067 legend{padding:0 5px;font-weight:800;font-size:11px}
.tbx-1067__chart{display:flex;align-items:flex-end;justify-content:space-around;gap:12px;height:132px;padding:16px 24px 0;background:linear-gradient(to top,#e5eaef 1px,transparent 1px) 0 100%/100% 32px;position:relative}.tbx-1067__bar{flex:1;max-width:50px;display:flex;align-items:flex-start;justify-content:center;padding-top:8px;color:white;font-size:10px;font-weight:800;border-radius:5px 5px 0 0;opacity:.35;transition:opacity .25s,transform .25s,filter .25s;transform-origin:bottom}
.tbx-1067__bar--a{height:102px;background:#3a8587}.tbx-1067__bar--b{height:65px;background:#d09169}.tbx-1067__bar--c{height:44px;background:#7b92c7}
.tbx-1067__legend{display:flex;gap:5px;justify-content:space-between;padding-top:12px}.tbx-1067__legend label{position:relative;flex:1;cursor:pointer;text-align:center}.tbx-1067__legend input{position:absolute;opacity:0;width:1px;height:1px}.tbx-1067__legend span{display:block;padding:7px 4px;border:1px solid #e3e9ec;border-radius:5px;font-size:10px;color:#647a87;transition:background .25s,border-color .25s}.tbx-1067__legend label:hover span{background:#e8f3f3;border-color:#6aa09e}.tbx-1067__legend input:checked+span{background:#e4f3f2;border-color:#72a8a5;color:#245763;font-weight:800}
.tbx-1067__legend input:focus-visible+span{outline:3px solid #d9a66c;outline-offset:2px}
.tbx-1067:has(input[value="search"]:checked) .tbx-1067__bar--a,.tbx-1067:has(input[value="social"]:checked) .tbx-1067__bar--b,.tbx-1067:has(input[value="direct"]:checked) .tbx-1067__bar--c{opacity:1;transform:scaleX(1.06)}
.tbx-1067:has(.tbx-1067__legend label:nth-child(1):hover) .tbx-1067__bar--a,.tbx-1067:has(.tbx-1067__legend label:nth-child(2):hover) .tbx-1067__bar--b,.tbx-1067:has(.tbx-1067__legend label:nth-child(3):hover) .tbx-1067__bar--c{opacity:1;filter:brightness(1.08);transform:scaleX(1.08)}
@media(prefers-reduced-motion:reduce){.tbx-1067__bar,.tbx-1067__legend span{transition:none}}
How to Use
HTMLを設置し、CSSを既存サイトのスタイルシートに追加します。既存クラスとの競合を避け、サイトの配色・サイズに合わせて調整してください。
Use Case
Analytics / Reports
Technical Notes
ホバー非対応端末でも主要操作ができるようにし、キーボードフォーカス時の表示と動き軽減設定を確認してください。
Mobile：タッチ端末向けにフォーカス・選択・開閉の操作を用意。ホバー専用の追加説明は常時読めるよう配慮します。
Browser：最新のChrome・Firefox・Safari・Edgeを想定。CSS :has()を使用する素材では対応ブラウザを確認してください。
Reduced Motion：prefers-reduced-motion: reduce に対応。