Live Demo
マウスを乗せるかTabキーでフォーカスして変化を確認してください。
Source Code
必要なコードをコピーして実装に利用できます。
HTML
<a class="tbx-1125" href="#travel"><span class="tbx-1125__memo" aria-hidden="true">SEASIDE / 2026<br><b>静かな午後の記録</b></span><span class="tbx-1125__paper"><span class="tbx-1125__scene"><i class="tbx-1125__sun"></i><i class="tbx-1125__shore"></i><i class="tbx-1125__roof"></i></span><strong>ON THE COAST</strong></span></a>CSS
.tbx-1125{position:relative;display:block;width:min(275px,100%);height:212px;text-decoration:none;font-family:system-ui,sans-serif;color:#485663;background:#eadfcf;border-radius:7px;overflow:hidden;isolation:isolate}.tbx-1125__memo{position:absolute;bottom:13px;left:28px;line-height:1.6;font-size:9px;letter-spacing:.08em;font-weight:800;color:#8c6354}.tbx-1125__memo b{font-size:10px}.tbx-1125__paper{position:absolute;left:30px;right:30px;top:16px;height:177px;padding:9px 9px 0;background:#fffdf6;box-shadow:0 10px 20px #4b3c3428;transform:rotate(-3deg);transition:transform .52s cubic-bezier(.2,.8,.2,1);display:flex;flex-direction:column;gap:7px}.tbx-1125__scene{flex:1;display:block;position:relative;overflow:hidden;background:linear-gradient(180deg,#a0c8c2 0 58%,#7da5a4 58% 70%,#b8a18b 70%)}.tbx-1125__sun{position:absolute;width:42px;height:42px;top:17px;right:31px;border-radius:50%;background:#fff1b5}.tbx-1125__shore{position:absolute;bottom:-31px;left:-10%;width:120%;height:80px;border-radius:50% 50% 0 0;background:#c2b7a4;transform:rotate(5deg)}.tbx-1125__roof{position:absolute;width:65px;height:40px;bottom:21px;left:23px;background:#bd7e65;clip-path:polygon(0 45%,50% 0,100% 45%,90% 45%,90% 100%,10% 100%,10% 45%)}.tbx-1125__paper strong{text-align:center;letter-spacing:.2em;font-size:9px;color:#69777a;line-height:25px}.tbx-1125:is(:hover,:focus-visible) .tbx-1125__paper{transform:translate(21px,-25px) rotate(5deg)}.tbx-1125:focus-visible{outline:3px solid #97654f;outline-offset:4px}@media(prefers-reduced-motion:reduce){.tbx-1125 *{transition:none!important}}
How to Use
HTMLを設置し、CSSを既存サイトのスタイルシートに追加します。既存クラスとの競合を避け、サイトの配色・サイズに合わせて調整してください。
Use Case
Gallery / Portfolio
Technical Notes
ホバー非対応端末でも主要操作ができるようにし、キーボードフォーカス時の表示と動き軽減設定を確認してください。
Mobile：タッチ端末では重要な情報は通常時から見える状態にしてください。
Browser：最新のChrome・Firefox・Safari・Edgeを想定。
Reduced Motion：prefers-reduced-motion: reduce に対応。