Live Demo
マウスを乗せると強調され、クリックで内訳を開閉できます。
Source Code
必要なコードをコピーして実装に利用できます。
HTML
<details class="tbx-1066"><summary><span class="tbx-1066__name">月間問い合わせ件数</span><span class="tbx-1066__value">1,284<small>件</small></span><span class="tbx-1066__sub">前月比 +12.8% <i aria-hidden="true">⌄</i></span></summary>
<div class="tbx-1066__detail"><b>集計の内訳</b><span>フォーム 824件</span><span>電話 460件</span><small>数値はデモ用データです。</small></div></details>
CSS
.tbx-1066{width:min(286px,100%);border:1px solid #dae5e9;border-radius:11px;background:#fff;font:11px/1.4 system-ui,sans-serif;color:#355668;box-shadow:0 4px 15px #36546f0c;overflow:hidden;transition:border-color .25s,box-shadow .25s}
.tbx-1066 summary{list-style:none;display:grid;gap:8px;cursor:pointer;padding:18px 18px 15px;border-top:4px solid #a7cacc;transition:border-color .25s}.tbx-1066 summary::-webkit-details-marker{display:none}.tbx-1066__name{color:#6f8593;font-size:10px;font-weight:700}.tbx-1066__value{color:#274a61;font-size:36px;letter-spacing:-.05em;font-weight:850;line-height:1}.tbx-1066__value small{font-size:11px;letter-spacing:normal;margin-left:4px}.tbx-1066__sub{color:#3a8e76;font-size:10px;font-weight:750;display:flex;justify-content:space-between}.tbx-1066__sub i{font-style:normal;font-size:17px;color:#7495a5;transition:transform .2s}.tbx-1066:is(:hover,:focus-within){border-color:#7cb3b6;box-shadow:0 9px 22px #21465219}.tbx-1066:is(:hover,:focus-within) summary{border-top-color:#3f9797}.tbx-1066[open] i{transform:rotate(180deg)}.tbx-1066 summary:focus-visible{outline:3px solid #dfa76e;outline-offset:-4px}
.tbx-1066__detail{display:grid;gap:5px;border-top:1px solid #e7edef;padding:11px 18px 14px;background:#f5f9f9}.tbx-1066__detail>b{font-size:10px}.tbx-1066__detail span{font-size:10px;color:#5c7986}.tbx-1066__detail small{font-size:9px;color:#9aa7aa}
@media(prefers-reduced-motion:reduce){.tbx-1066,.tbx-1066 summary,.tbx-1066__sub i{transition:none}}
How to Use
HTMLを設置し、CSSを既存サイトのスタイルシートに追加します。既存クラスとの競合を避け、サイトの配色・サイズに合わせて調整してください。
Use Case
Reports / Statistics
Technical Notes
ホバー非対応端末でも主要操作ができるようにし、キーボードフォーカス時の表示と動き軽減設定を確認してください。
Mobile：タッチ端末向けにフォーカス・選択・開閉の操作を用意。ホバー専用の追加説明は常時読めるよう配慮します。
Browser：最新のChrome・Firefox・Safari・Edgeを想定。CSS :has()を使用する素材では対応ブラウザを確認してください。
Reduced Motion：prefers-reduced-motion: reduce に対応。