Live Demo
マウスを乗せるかTabキーでフォーカスして変化を確認してください。
Source Code
必要なコードをコピーして実装に利用できます。
HTML
<a class="tbx-1078" href="#details" aria-label="Webサイト運用サポートの詳細を見る"><span class="tbx-1078__top"><span class="tbx-1078__icon" aria-hidden="true">▤</span><span class="tbx-1078__head"><b>運用サポート</b><small>MAINTENANCE</small></span></span><p>公開後の更新・運用を支援します。</p><span class="tbx-1078__drawer" aria-hidden="true"><span>記事更新</span><span>保守点検</span><span>相談受付</span></span><span class="tbx-1078__more">詳しく見る <i aria-hidden="true">→</i></span></a>
CSS
.tbx-1078{display:block;width:min(285px,100%);min-height:196px;background:white;border-radius:11px;border:1px solid #d6e2e8;padding:19px;color:#263f50;text-decoration:none;font:12px/1.45 system-ui,sans-serif;box-shadow:0 5px 14px #2136490a;transition:border-color .3s,box-shadow .3s}
.tbx-1078__top{display:flex;align-items:center;gap:11px}.tbx-1078__icon{display:grid;place-items:center;font-size:25px;background:#e4f0ee;color:#31756d;width:45px;height:45px;border-radius:10px;transition:transform .3s}.tbx-1078__head{display:grid;gap:4px}.tbx-1078__head b{font-size:13px}.tbx-1078__head small{font-size:8px;letter-spacing:.09em;color:#7e96a2}
.tbx-1078 p{font-size:10px;color:#6d8490;margin:13px 0 0}.tbx-1078__drawer{display:flex;align-items:center;flex-wrap:wrap;gap:5px;max-height:0;opacity:0;overflow:hidden;margin:0;transition:max-height .4s,opacity .24s,margin .3s}
.tbx-1078__drawer span{font-size:9px;background:#eaf3f0;border-radius:3px;color:#367d77;padding:5px 7px}
.tbx-1078__more{display:flex;align-items:center;justify-content:space-between;font-size:10px;font-weight:800;border-top:1px solid #e8eff1;padding-top:11px;margin-top:14px;color:#347f78}
.tbx-1078__more i{font-style:normal;font-size:18px;transition:transform .3s}
.tbx-1078:is(:hover,:focus-visible){border-color:#8ab8b2;box-shadow:0 11px 23px #21364919}.tbx-1078:is(:hover,:focus-visible) .tbx-1078__drawer{max-height:72px;opacity:1;margin-top:12px}
.tbx-1078:is(:hover,:focus-visible) .tbx-1078__more i{transform:translateX(5px)}.tbx-1078:is(:hover,:focus-visible) .tbx-1078__icon{transform:rotate(-8deg)}
.tbx-1078:focus-visible{outline:3px solid #d9ad6b;outline-offset:4px}
@media(prefers-reduced-motion:reduce){.tbx-1078,.tbx-1078 *{transition:none!important}}
How to Use
HTMLを設置し、CSSを既存サイトのスタイルシートに追加します。既存クラスとの競合を避け、サイトの配色・サイズに合わせて調整してください。
Use Case
Services / Corporate
Technical Notes
ホバー非対応端末でも主要操作ができるようにし、キーボードフォーカス時の表示と動き軽減設定を確認してください。
Mobile：タッチ端末にはリンクの本来の役割を残し、必要な説明は通常時にも読める形にしてください。
Browser：最新のChrome・Firefox・Safari・Edgeを想定。
Reduced Motion：prefers-reduced-motion: reduce に対応。