Live Demo
ホバーまたはTabキーでフォーカスして変化を確認してください。
Source Code
必要なコードをコピーして実装に利用できます。
HTML
<article class="tbx-1060" tabindex="0"><div class="tbx-1060__top"><span>WEB DESIGN</span><small>5 min read</small></div><h3>伝わる余白のつくり方</h3><p>文字や画像の配置を整えて、読みやすいページに仕上げるための考え方。</p><div class="tbx-1060__foot"><span>記事の概要を読む</span><span aria-hidden="true">→</span></div></article>
CSS
.tbx-1060{width:min(273px,100%);padding:18px 17px 14px;border:1px solid #dfe5e9;border-radius:9px;background:#fff;font-family:system-ui;color:#253e53;transition:border-color .3s,box-shadow .3s}.tbx-1060__top{display:flex;align-items:center;justify-content:space-between;gap:8px}.tbx-1060__top span{font-size:9px;font-weight:800;color:#44828b;letter-spacing:.1em}.tbx-1060__top small{font-size:9px;color:#899aab}.tbx-1060 h3{font-size:15px;letter-spacing:-.02em;margin:11px 0 7px}.tbx-1060 p{font-size:10px;line-height:1.7;color:#677c8d;margin:0;min-height:35px}.tbx-1060__foot{border-top:1px solid #e9edf1;padding-top:12px;margin-top:11px;display:flex;justify-content:space-between;color:#547083;font-weight:750;font-size:10px}.tbx-1060__foot span:last-child{font-size:16px;line-height:.8;transition:transform .25s,color .25s}.tbx-1060:before{content:"";display:block;position:relative;background:#4d8f8b;height:2px;width:0;top:-18px;left:-17px;transition:width .33s}.tbx-1060:is(:hover,:focus-visible){border-color:#a9cbc5;box-shadow:0 10px 22px #224b5917}.tbx-1060:is(:hover,:focus-visible):before{width:calc(100% + 34px)}.tbx-1060:is(:hover,:focus-visible) .tbx-1060__foot span:last-child{color:#2c8b87;transform:translateX(5px)}
.tbx-1060:focus-visible{outline:3px solid #d3a16c;outline-offset:3px}@media(prefers-reduced-motion:reduce){.tbx-1060,.tbx-1060:before,.tbx-1060__foot span:last-child{transition:none}}
How to Use
HTMLを設置し、CSSを既存サイトのスタイルシートに追加します。既存クラスとの競合を避け、サイトの配色・サイズに合わせて調整してください。
Use Case
Blog / News
Technical Notes
ホバー非対応端末でも主要操作ができるようにし、キーボードフォーカス時の表示と動き軽減設定を確認してください。
Mobile：ホバーのない端末ではタップ・選択による操作が可能な部分を設けています。
Browser：最新のChrome・Firefox・Safari・Edgeでの利用を想定。:has()を使う素材は対応ブラウザが必要です。
Reduced Motion：prefers-reduced-motion: reduce に対応。