Live Demo
ホバーまたはTabキーでフォーカスして変化を確認してください。
Source Code
必要なコードをコピーして実装に利用できます。
HTML
<article class="tbx-1051" tabindex="0" aria-label="10月24日 デザイン勉強会 受付中">
<div class="tbx-1051__date"><strong>24</strong><span>OCT</span></div>
<div class="tbx-1051__detail"><span class="tbx-1051__tag">受付中</span><b>デザイン勉強会</b><small>14:00–16:00 ・オンライン</small></div>
<span class="tbx-1051__arrow" aria-hidden="true">→</span>
</article>
CSS
.tbx-1051{display:flex;align-items:center;gap:12px;width:min(305px,100%);border:1px solid #e5dbca;border-radius:11px;padding:14px;background:#fffdf8;color:#38434c;font-family:system-ui;cursor:default;transition:border-color .28s,box-shadow .28s}
.tbx-1051__date{height:75px;flex:0 0 63px;display:grid;align-content:center;justify-items:center;border-radius:7px;background:#304f58;color:white;gap:0;transition:background .28s,transform .28s}
.tbx-1051__date strong{font-size:29px;line-height:1.1}.tbx-1051__date span{font-size:9px;letter-spacing:.18em;font-weight:700}
.tbx-1051__detail{min-width:0;flex:1;display:flex;flex-direction:column;gap:5px}.tbx-1051__tag{align-self:start;font-size:9px;color:#a26444;background:#f9e7d6;padding:3px 7px;border-radius:30px}.tbx-1051 b{font-size:12px}.tbx-1051 small{font-size:10px;color:#7a8490;white-space:nowrap}.tbx-1051__arrow{font-size:18px;color:#7b8c98;transition:transform .26s}
.tbx-1051:is(:hover,:focus-visible){border-color:#b9a083;box-shadow:0 12px 23px #59472817}.tbx-1051:is(:hover,:focus-visible) .tbx-1051__date{background:#ad6e51;transform:translateY(-3px)}.tbx-1051:is(:hover,:focus-visible) .tbx-1051__arrow{transform:translateX(3px)}
.tbx-1051:focus-visible{outline:3px solid #d1a06e;outline-offset:3px}@media(prefers-reduced-motion:reduce){.tbx-1051,.tbx-1051__date,.tbx-1051__arrow{transition:none}}
How to Use
HTMLを設置し、CSSを既存サイトのスタイルシートに追加します。既存クラスとの競合を避け、サイトの配色・サイズに合わせて調整してください。
Use Case
Events / News
Technical Notes
ホバー非対応端末でも主要操作ができるようにし、キーボードフォーカス時の表示と動き軽減設定を確認してください。
Mobile：ホバーのない端末ではタップ・選択による操作が可能な部分を設けています。
Browser：最新のChrome・Firefox・Safari・Edgeでの利用を想定。:has()を使う素材は対応ブラウザが必要です。
Reduced Motion：prefers-reduced-motion: reduce に対応。