Live Demo
マウスで強調され、クリックまたはEnterキーで費用内訳が開きます。
Source Code
必要なコードをコピーして実装に利用できます。
HTML
<details class="tbx-1071"><summary><span><b>ご注文の合計</b><small>税込・送料込みの例</small></span><strong>¥4,980 <i aria-hidden="true">⌄</i></strong></summary>
<div class="tbx-1071__rows"><div><span>商品代金</span><b>¥4,000</b></div><div><span>送料</span><b>¥580</b></div><div><span>消費税（表示例）</span><b>¥400</b></div><p>金額は説明用のダミーです。</p></div></details>
CSS
.tbx-1071{width:min(293px,100%);background:#fff;border:1px solid #dce5e6;border-radius:10px;font:11px/1.4 system-ui,sans-serif;color:#2a4b5d;overflow:hidden;transition:border-color .24s,box-shadow .24s}.tbx-1071 summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:9px;padding:17px 15px;cursor:pointer;border-left:4px solid #9fcac5;transition:border-color .25s,background .25s}.tbx-1071 summary::-webkit-details-marker{display:none}.tbx-1071 summary span{display:grid;gap:6px}.tbx-1071 summary span b{font-size:11px}.tbx-1071 summary small{font-size:9px;color:#8aa0a8}.tbx-1071 summary strong{font-size:16px;white-space:nowrap}.tbx-1071 summary strong i{font-size:14px;font-style:normal;color:#779ba2;display:inline-block;transition:transform .22s}.tbx-1071[open] summary i{transform:rotate(180deg)}.tbx-1071:is(:hover,:focus-within){border-color:#7cb6b0;box-shadow:0 9px 23px #27556a16}.tbx-1071 summary:is(:hover,:focus-visible){border-left-color:#378e86;background:#edf7f4}.tbx-1071 summary:focus-visible{outline:3px solid #d8a877;outline-offset:-4px}.tbx-1071__rows{padding:12px 15px;border-top:1px solid #e1ebed;background:#f7faf9;display:grid;gap:9px}.tbx-1071__rows div{display:flex;justify-content:space-between;gap:15px;color:#647c88;font-size:10px}.tbx-1071__rows div b{color:#325568}.tbx-1071__rows p{font-size:9px;color:#94a5ab;margin:5px 0 0}
@media(prefers-reduced-motion:reduce){.tbx-1071,.tbx-1071 summary,.tbx-1071 summary strong i{transition:none}}
How to Use
HTMLを設置し、CSSを既存サイトのスタイルシートに追加します。既存クラスとの競合を避け、サイトの配色・サイズに合わせて調整してください。
Use Case
EC / Checkout
Technical Notes
ホバー非対応端末でも主要操作ができるようにし、キーボードフォーカス時の表示と動き軽減設定を確認してください。
Mobile：タッチ端末向けにフォーカス・選択・開閉の操作を用意。ホバー専用の追加説明は常時読めるよう配慮します。
Browser：最新のChrome・Firefox・Safari・Edgeを想定。CSS :has()を使用する素材では対応ブラウザを確認してください。
Reduced Motion：prefers-reduced-motion: reduce に対応。