Live Demo
ホバーで質問が強調されます。クリック・Enter・Spaceで回答を展開できます。
Source Code
必要なコードをコピーして実装に利用できます。
HTML
<details class="tbx-1041"><summary>制作期間はどのくらい？ <span aria-hidden="true" class="tbx-1041__icon">+</span></summary><p>内容やページ数により異なります。まずは構成を相談して進めます。</p></details>
CSS
.tbx-1041{width:min(275px,100%);border:1px solid #cfdae2;border-radius:8px;background:#fff;color:#274258;font:12px/1.65 system-ui;overflow:hidden;transition:border-color .2s}
.tbx-1041 summary{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:16px 13px;cursor:pointer;list-style:none;font-weight:700;transition:background .2s,color .2s}
.tbx-1041 summary::-webkit-details-marker{display:none}.tbx-1041__icon{width:23px;height:23px;display:grid;place-items:center;border:1px solid #c3d0da;border-radius:50%;font-size:16px;line-height:1;transition:transform .25s,background .25s}
.tbx-1041 summary:is(:hover,:focus-visible){background:#edf7f5;color:#146475}
.tbx-1041 summary:is(:hover,:focus-visible) .tbx-1041__icon{background:#cde8e2;transform:rotate(45deg)}
.tbx-1041[open] .tbx-1041__icon{transform:rotate(45deg);background:#cde8e2}
.tbx-1041[open]{border-color:#76a7aa}.tbx-1041 p{margin:0;padding:0 13px 15px;color:#557086;font-size:11px}
.tbx-1041 summary:focus-visible{outline:2px solid #b78255;outline-offset:-3px}
@media(prefers-reduced-motion:reduce){.tbx-1041,.tbx-1041 summary,.tbx-1041__icon{transition:none}}
How to Use
HTMLを設置し、CSSを既存サイトのスタイルシートに追加します。既存クラスとの競合を避け、サイトの配色・サイズに合わせて調整してください。
Use Case
サービス案内のよくある質問・ヘルプ
Technical Notes
ホバー非対応端末でも主要操作ができるようにし、キーボードフォーカス時の表示と動き軽減設定を確認してください。
Mobile：ホバーのない端末でも情報が欠落しない設計を基本とします。クリックで操作するサンプルはタップで確認できます。
Browser：最新のChrome・Firefox・Safari・Edge向けCSS。:has()を利用する素材は最新ブラウザを想定しています。
Reduced Motion：prefers-reduced-motion: reduceに対応。