パーツ番号 03-14-05 ・ CSSのみ
モバイル横スクロール・スナップパンくず
横幅に収まらない深い階層のパンくずを、スナップ付きで横スクロールできるようにしたモバイル向けUIです。WordPressのECサイトの商品詳細ページなどに向いています。
プレビュー
ソースコード
HTML
<div class="d03-14-05-stage">
<div class="d03-14-05-scroll">
<a href="#" onclick="return false">ホーム</a>
<span class="d03-14-05-sep">›</span><a href="#" onclick="return false">ショップ</a>
<span class="d03-14-05-sep">›</span><a href="#" onclick="return false">レディース</a>
<span class="d03-14-05-sep">›</span><a href="#" onclick="return false">アウター</a>
<span class="d03-14-05-sep">›</span><a href="#" onclick="return false">コート</a>
<span class="d03-14-05-sep">›</span><span class="d03-14-05-current">ロングコート</span>
</div>
<p class="d03-14-05-hint">← 横にスワイプできます →</p>
</div>CSS
.prev.d03-14-05{padding:0;display:block}
.d03-14-05-stage{position:relative;width:100%;height:100%;min-height:260px;overflow:hidden;background:#f8fafc;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:24px 0}
.d03-14-05-scroll{
display:flex;align-items:center;gap:8px;max-width:280px;
overflow-x:auto;scroll-snap-type:x proximity;padding:12px 20px;
background:#fff;border:1px solid #e2e8f0;border-radius:999px;
-webkit-overflow-scrolling:touch;
}
.d03-14-05-scroll::-webkit-scrollbar{height:0}
.d03-14-05-scroll a,.d03-14-05-current{
scroll-snap-align:center;white-space:nowrap;text-decoration:none;
color:#475569;font-weight:600;font-size:12.5px;flex:none;
}
.d03-14-05-scroll a:hover{color:#2563eb}
.d03-14-05-current{color:#0f172a;font-weight:700}
.d03-14-05-sep{color:#cbd5e1;flex:none}
.d03-14-05-hint{margin:0;font-size:11px;color:#94a3b8}クラス名 .d03-14-05 は本ライブラリ内での識別用です。複数のパーツを同じページで使う場合は、重複しないよう名前を変更してください。