Live Demo
マウスを重ねるか、Tabキーによるフォーカスで変化を確認してください。
Source Code
必要なコードをコピーして実装に利用できます。
HTML
<figure class="tbx-1047" tabindex="0"><span class="tbx-1047__mark" aria-hidden="true">“</span><blockquote>相談のしやすさが、いちばんの決め手でした。</blockquote><figcaption><span class="tbx-1047__rule" aria-hidden="true"></span>ご利用者の声</figcaption></figure>
CSS
.tbx-1047{width:min(260px,100%);position:relative;display:flex;flex-direction:column;gap:10px;margin:0;padding:19px 18px 16px;border-radius:9px;border:1px solid #dfd9cd;background:#fffaf3;color:#4a443c;box-shadow:0 4px 12px #553e2408;font-family:system-ui;transition:border-color .3s,background .3s}
.tbx-1047__mark{height:34px;font:bold 58px/1 Georgia,serif;color:#d8b8a4;transform-origin:left bottom;transition:transform .32s,color .32s}
.tbx-1047 blockquote{font-weight:650;font-size:13px;line-height:1.75;margin:0}.tbx-1047 figcaption{display:flex;gap:8px;align-items:center;font-size:10px;color:#8a7767}
.tbx-1047__rule{height:1px;width:17px;background:#bc9279;transition:width .3s}
.tbx-1047:is(:hover,:focus-visible){border-color:#c9957b;background:#fff4e7}
.tbx-1047:is(:hover,:focus-visible) .tbx-1047__mark{transform:translateY(-4px) rotate(-6deg);color:#bf7d60}
.tbx-1047:is(:hover,:focus-visible) .tbx-1047__rule{width:36px}
.tbx-1047:focus-visible{outline:3px solid #c78b5f;outline-offset:3px}
@media(prefers-reduced-motion:reduce){.tbx-1047,.tbx-1047__mark,.tbx-1047__rule{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に対応。