Live Demo
マウスを乗せるかTabキーでフォーカスして変化を確認してください。
Source Code
必要なコードをコピーして実装に利用できます。
HTML
<a class="tbx-1116" href="#case"><span class="tbx-1116__main"><small>CASE STUDY 017</small><span class="tbx-1116__visual" aria-hidden="true"><i></i><b></b></span><strong>ブランドを伝える<br>ウェブサイト。</strong></span><span class="tbx-1116__rail"><span>2026</span><b>WEB<br>DESIGN</b><i aria-hidden="true">↗</i></span></a>
CSS
.tbx-1116{width:min(287px,100%);height:188px;display:flex;background:#f0e8e0;color:#3e454c;text-decoration:none;border-radius:9px;overflow:hidden;font-family:system-ui,sans-serif;isolation:isolate}
.tbx-1116__main{flex:1;min-width:0;display:flex;flex-direction:column;padding:16px;gap:8px}.tbx-1116__main small{font-size:8px;letter-spacing:.1em;font-weight:800;color:#ac766e}.tbx-1116__main strong{font-size:14px;line-height:1.4}.tbx-1116__visual{position:relative;display:block;height:63px;background:#c7afa3;border-radius:3px;overflow:hidden}.tbx-1116__visual i{position:absolute;left:10px;top:9px;width:63%;height:55px;background:#eee1c8;transform:skew(-15deg);transition:transform .45s}.tbx-1116__visual b{position:absolute;right:10px;top:16px;width:35%;height:42px;background:#a3776d;transform:skew(20deg);transition:transform .45s}
.tbx-1116__rail{display:flex;flex-direction:column;align-items:center;justify-content:space-between;gap:7px;padding:12px 7px;background:#445c62;color:#f2ebe5;width:46px;transition:width .46s cubic-bezier(.2,.8,.2,1),background .3s;overflow:hidden}.tbx-1116__rail span{font-size:10px;letter-spacing:.08em;writing-mode:vertical-rl}.tbx-1116__rail b{font-size:10px;text-align:center;line-height:1.5;opacity:.4;transform:translateX(8px);transition:opacity .3s,transform .3s}.tbx-1116__rail i{font-size:23px;font-style:normal}
.tbx-1116:is(:hover,:focus-visible) .tbx-1116__rail{width:84px;background:#a77061}.tbx-1116:is(:hover,:focus-visible) .tbx-1116__rail b{opacity:1;transform:translateX(0)}.tbx-1116:is(:hover,:focus-visible) .tbx-1116__visual i{transform:translateX(-5px) skew(-15deg)}.tbx-1116:is(:hover,:focus-visible) .tbx-1116__visual b{transform:translateX(5px) skew(20deg)}
.tbx-1116:focus-visible{outline:3px solid #a77061;outline-offset:4px}@media(prefers-reduced-motion:reduce){.tbx-1116 *{transition:none!important}}
How to Use
HTMLを設置し、CSSを既存サイトのスタイルシートに追加します。既存クラスとの競合を避け、サイトの配色・サイズに合わせて調整してください。
Use Case
Case Study / Portfolio
Technical Notes
ホバー非対応端末でも主要操作ができるようにし、キーボードフォーカス時の表示と動き軽減設定を確認してください。
Mobile：タッチ端末では実際のリンク操作を優先し、必要な情報は通常状態でも提供してください。
Browser：最新のChrome・Firefox・Safari・Edgeを想定。
Reduced Motion：prefers-reduced-motion: reduce に対応。