Live Demo
マウスを乗せるか、Tabキーでフォーカスして動きを確認してください。
Source Code
必要なコードをコピーして実装に利用できます。
HTML
<a class="tbx-1200" href="#report" aria-label="調査レポートを読む"><span class="tbx-1200__sheet tbx-1200__sheet--back" aria-hidden="true"></span><span class="tbx-1200__sheet tbx-1200__sheet--mid" aria-hidden="true"></span><span class="tbx-1200__sheet tbx-1200__sheet--front"><small>INSIGHT / 2026</small><strong>Web Trends<br>Quarterly</strong><span class="tbx-1200__bars" aria-hidden="true"><i></i><i></i><i></i><i></i></span><em>レポートを見る <span>↗</span></em></span></a>
CSS
.tbx-1200{box-sizing:border-box;width:263px;max-width:100%;height:187px;position:relative;display:block;color:#eaf4fa;text-decoration:none;font-family:system-ui;isolation:isolate}.tbx-1200__sheet{position:absolute;inset:9px 17px;display:block;border-radius:6px;transition:transform .44s,background .4s}.tbx-1200__sheet--back{background:#c2dfd8;transform:rotate(-4deg)}.tbx-1200__sheet--mid{background:#81b5c2;transform:rotate(2deg)}.tbx-1200__sheet--front{background:#1f4d63;padding:15px 17px;box-shadow:0 8px 20px #1432422c;display:flex;flex-direction:column;gap:7px}.tbx-1200__sheet small{font-size:9px;letter-spacing:.16em;color:#a6d9d7}.tbx-1200__sheet strong{font-size:20px;line-height:1.1}.tbx-1200__bars{display:flex;gap:6px;height:22px;align-items:flex-end}.tbx-1200__bars i{background:#f6c47d;width:18px;height:65%}.tbx-1200__bars i:nth-child(2){height:100%}.tbx-1200__bars i:nth-child(3){height:35%}.tbx-1200__bars i:nth-child(4){height:82%}.tbx-1200__sheet em{font-size:10px;font-style:normal;margin-top:auto;display:flex;justify-content:space-between}.tbx-1200:is(:hover,:focus-visible) .tbx-1200__sheet--back{transform:translate(-12px,-6px) rotate(-9deg)}.tbx-1200:is(:hover,:focus-visible) .tbx-1200__sheet--mid{transform:translate(12px,5px) rotate(6deg)}.tbx-1200:is(:hover,:focus-visible) .tbx-1200__sheet--front{transform:translateY(-4px)}.tbx-1200:focus-visible{outline:3px solid #518da0;outline-offset:2px}
@media (prefers-reduced-motion: reduce) {.tbx-1200,.tbx-1200 *,.tbx-1200::before,.tbx-1200::after,.tbx-1200 *::before,.tbx-1200 *::after{transition-duration:.01ms!important;animation-duration:.01ms!important;scroll-behavior:auto!important}}
How to Use
HTMLを設置し、CSSを既存サイトのスタイルシートに追加します。既存クラスとの競合を避け、サイトの配色・サイズに合わせて調整してください。
Use Case
Report / Blog
Technical Notes
ホバー非対応端末でも主要操作ができるようにし、キーボードフォーカス時の表示と動き軽減設定を確認してください。
Mobile：タッチ端末で重要情報をホバー時にだけ隠さない設計にしてください。
Browser：Chrome・Firefox・Safari・Edgeの最近のバージョンを想定。:has()およびclip-path等は対応ブラウザを確認。
Reduced Motion：prefers-reduced-motion: reduce 対応。