Live Demo
マウスを乗せるか、Tabキーで操作して変化を確認してください。
Source Code
必要なコードをコピーして実装に利用できます。
HTML
<ol class="tbx-1064" aria-label="会社沿革サンプル">
<li tabindex="0"><span class="tbx-1064__year">2016</span><div><b>創業</b><small>小さな制作室としてスタート</small></div></li>
<li tabindex="0"><span class="tbx-1064__year">2020</span><div><b>事業拡大</b><small>Web制作サービスを全国へ展開</small></div></li>
<li tabindex="0"><span class="tbx-1064__year">2026</span><div><b>新サービス公開</b><small>Web Tipsライブラリを開始</small></div></li>
</ol>
CSS
.tbx-1064{list-style:none;margin:0;padding:3px 0 3px 18px;border-left:2px solid #d8e5e7;width:min(295px,100%);font:11px/1.5 system-ui,sans-serif;color:#32536b}
.tbx-1064 li{position:relative;display:flex;gap:13px;align-items:center;border-radius:8px;padding:9px 12px;transition:background .25s,transform .25s;cursor:default}
.tbx-1064 li:before{content:"";position:absolute;left:-23px;width:9px;height:9px;border-radius:50%;border:3px solid #fff;background:#b2cdd0;box-shadow:0 0 0 2px #d3e1e3;transition:background .25s,box-shadow .25s}
.tbx-1064__year{font-size:12px;font-weight:850;color:#638293;transition:color .25s}.tbx-1064 li div{display:grid;gap:2px}.tbx-1064 b{font-size:11px}.tbx-1064 small{font-size:9px;color:#8499a5}.tbx-1064 li:is(:hover,:focus-visible){background:#e4f3f2;transform:translateX(4px)}.tbx-1064 li:is(:hover,:focus-visible):before{background:#3a8d86;box-shadow:0 0 0 4px #c5e4e1}.tbx-1064 li:is(:hover,:focus-visible) .tbx-1064__year{color:#256e78}.tbx-1064 li:focus-visible{outline:2px solid #d4a06e;outline-offset:1px}
@media(prefers-reduced-motion:reduce){.tbx-1064 li,.tbx-1064 li:before,.tbx-1064__year{transition:none}}
How to Use
HTMLを設置し、CSSを既存サイトのスタイルシートに追加します。既存クラスとの競合を避け、サイトの配色・サイズに合わせて調整してください。
Use Case
Company / History
Technical Notes
ホバー非対応端末でも主要操作ができるようにし、キーボードフォーカス時の表示と動き軽減設定を確認してください。
Mobile：タッチ端末向けにフォーカス・選択・開閉の操作を用意。ホバー専用の追加説明は常時読めるよう配慮します。
Browser：最新のChrome・Firefox・Safari・Edgeを想定。CSS :has()を使用する素材では対応ブラウザを確認してください。
Reduced Motion：prefers-reduced-motion: reduce に対応。