横スクロールカード列
カード ／ パターン集トップ
事例・プラン比較向け。スナップで1枚ずつ止める
プレビュー#
コピーする#
上のプレビューでつまみを動かし、「生成する」で調整を反映したコードを作ってからコピーしてください。下の欄は生成の元になる型で、直接コピーするものではありません。
<div class="card-scroll" role="region" aria-label="事例">
<ul class="card-scroll__track">
<li class="card-scroll__item"><h3>事例A</h3><p>LP刷新で問い合わせが増えた例。</p></li>
<li class="card-scroll__item"><h3>事例B</h3><p>予約導線を短くした例。</p></li>
<li class="card-scroll__item"><h3>事例C</h3><p>料金表を整理した例。</p></li>
</ul>
</div>.card-scroll {
margin-inline: calc(var(--gutter) * -1);
padding-inline: var(--gutter);
}
.card-scroll__track {
display: flex;
gap: var(--space-4);
overflow-x: auto;
scroll-snap-type: x mandatory;
padding-block-end: var(--space-2);
list-style: none;
margin: 0;
padding-inline: 0;
-webkit-overflow-scrolling: touch;
}
.card-scroll__item {
flex: 0 0 min(80vw, 18rem);
scroll-snap-align: start;
padding: var(--space-5);
background: var(--color-surface);
border: 1px solid var(--color-border);
}
.card-scroll__item h3 {
margin: 0 0 var(--space-2);
font-size: var(--text-lg);
}
.card-scroll__item p {
margin: 0;
font-size: var(--text-sm);
color: var(--color-text-muted);
}確認する#
- scroll-snap-type で1枚ずつ止める
- カード幅は min(80vw, 18rem) で375pxでも操作できる
- overflow-x だけ。縦方向はページスクロールに任せる