Live Demo
マウスを乗せるかTabキーでフォーカスして変化を確認してください。
Source Code
必要なコードをコピーして実装に利用できます。
HTML
<a href="#story" class="tbx-1147"><span class="tbx-1147__vertical">特集記事</span><span class="tbx-1147__bar" aria-hidden="true"></span><span class="tbx-1147__horizontal"><small>JOURNAL / 03</small><strong>季節の読みもの</strong><span>記事を読む ↗</span></span></a>CSS
.tbx-1147{box-sizing:border-box;position:relative;display:flex;align-items:center;gap:17px;width:min(290px,100%);min-height:167px;padding:14px 22px;background:#f8f1e7;border:1px solid #d7c7b0;border-radius:6px;text-decoration:none;color:#414038;overflow:hidden;font-family:system-ui,sans-serif}
.tbx-1147__vertical{writing-mode:vertical-rl;letter-spacing:.2em;font-size:19px;font-weight:800;transition:transform .48s}
.tbx-1147__bar{height:104px;width:1px;background:#a8aa87;transform-origin:bottom;transition:transform .48s}
.tbx-1147__horizontal{display:grid;gap:9px;opacity:.25;transform:translateX(-9px);transition:opacity .42s,transform .42s}
.tbx-1147 small{font-size:10px;letter-spacing:.15em;color:#887450}.tbx-1147 strong{font-size:17px;white-space:nowrap}.tbx-1147__horizontal>span{font-size:12px;color:#7d6044}
.tbx-1147:is(:hover,:focus-visible) .tbx-1147__vertical{transform:translateY(-5px)}.tbx-1147:is(:hover,:focus-visible) .tbx-1147__bar{transform:scaleY(.55)}.tbx-1147:is(:hover,:focus-visible) .tbx-1147__horizontal{opacity:1;transform:translateX(0)}
.tbx-1147:focus-visible{outline:3px solid #9e805b;outline-offset:4px}
@media (prefers-reduced-motion: reduce) { .tbx-1147, .tbx-1147 *, .tbx-1147::before, .tbx-1147::after, .tbx-1147 *::before, .tbx-1147 *::after { animation-duration:.01ms !important;transition-duration:.01ms !important;scroll-behavior:auto !important } }
How to Use
HTMLを設置し、CSSを既存サイトのスタイルシートに追加します。既存クラスとの競合を避け、サイトの配色・サイズに合わせて調整してください。
Use Case
Editorial / Navigation
Technical Notes
ホバー非対応端末でも主要操作ができるようにし、キーボードフォーカス時の表示と動き軽減設定を確認してください。
Mobile：タッチ操作ではホバー効果に依存しない導線を維持してください。
Browser：最新のChrome・Firefox・Safari・Edgeを想定。
Reduced Motion：prefers-reduced-motion: reduceに対応。