Live Demo
ホバーで表紙の動きを確認し、クリックで概要を開閉できます。
Source Code
必要なコードをコピーして実装に利用できます。
HTML
<details class="tbx-1070"><summary><span class="tbx-1070__badge">PDF GUIDE</span><span class="tbx-1070__page"><i class="tbx-1070__fold" aria-hidden="true"></i><b>制作ガイド</b><small>WEB DESIGN</small><em aria-hidden="true">▥ ▥ ▥</em></span><span class="tbx-1070__tip">内容を確認 <span aria-hidden="true">↗</span></span></summary><div class="tbx-1070__inside"><b>この資料について</b><p>制作の基本・確認事項・公開までの流れ（サンプル）</p></div></details>
CSS
.tbx-1070{width:min(278px,100%);font:11px/1.4 system-ui,sans-serif;color:#355466}.tbx-1070 summary{cursor:pointer;list-style:none;position:relative;display:grid;justify-items:center;gap:9px;min-height:199px;padding:11px 10px 12px;border:1px solid #d8e4e9;border-radius:9px;background:#eaf0f3;overflow:hidden;transition:background .25s}.tbx-1070 summary::-webkit-details-marker{display:none}.tbx-1070__badge{font-size:8px;letter-spacing:.1em;font-weight:850;color:#7e92a0}.tbx-1070__page{position:relative;display:grid;align-content:start;gap:8px;width:122px;height:131px;padding:22px 11px 10px;border-radius:2px;background:#fff;box-shadow:3px 6px 16px #2b4b5d26;transform:rotate(-4deg);transition:transform .32s,box-shadow .32s}.tbx-1070__page b{font-size:14px}.tbx-1070__page small{font-size:8px;letter-spacing:.14em;color:#91a4b0}.tbx-1070__page em{font:20px/1 system-ui;letter-spacing:3px;color:#a7c3c3;margin-top:12px}.tbx-1070__fold{position:absolute;right:0;top:0;width:0;height:0;border-top:26px solid #beded9;border-left:26px solid #e8f2f0;box-shadow:-3px 3px 5px #2f5d5522}.tbx-1070__tip{font-size:10px;font-weight:750;color:#477e86}.tbx-1070__tip span{display:inline-block;transition:transform .3s}.tbx-1070 summary:is(:hover,:focus-visible){background:#dcece9}.tbx-1070 summary:is(:hover,:focus-visible) .tbx-1070__page{transform:rotate(4deg) translateY(-3px);box-shadow:5px 12px 18px #2b4b5d30}.tbx-1070 summary:is(:hover,:focus-visible) .tbx-1070__tip span{transform:translate(3px,-3px)}.tbx-1070 summary:focus-visible{outline:3px solid #d2a375;outline-offset:2px}.tbx-1070__inside{background:#fff;border:1px solid #d8e4e9;border-top:0;border-radius:0 0 9px 9px;padding:10px 14px}.tbx-1070__inside b{font-size:10px}.tbx-1070__inside p{font-size:9px;color:#78929c;line-height:1.6;margin:5px 0 0}
@media(prefers-reduced-motion:reduce){.tbx-1070 summary,.tbx-1070__page,.tbx-1070__tip span{transition:none}}
How to Use
HTMLを設置し、CSSを既存サイトのスタイルシートに追加します。既存クラスとの競合を避け、サイトの配色・サイズに合わせて調整してください。
Use Case
Downloads / Documentation
Technical Notes
ホバー非対応端末でも主要操作ができるようにし、キーボードフォーカス時の表示と動き軽減設定を確認してください。
Mobile：タッチ端末向けにフォーカス・選択・開閉の操作を用意。ホバー専用の追加説明は常時読めるよう配慮します。
Browser：最新のChrome・Firefox・Safari・Edgeを想定。CSS :has()を使用する素材では対応ブラウザを確認してください。
Reduced Motion：prefers-reduced-motion: reduce に対応。