パーツ番号 05-03-12 ・ CSSのみ

横スクロールスナップ工程カード

指でスワイプまたはドラッグすると工程カードが1枚ずつピタッと止まる横スクロールUIです。WordPressのスマホビューでの工程紹介に向いています。

mobilescrolldragcss

プレビュー

ソースコード

HTML

<div class="d05-03-12-scroll">
          <div class="d05-03-12-card"><span class="d05-03-12-n">01</span><b>ヒアリング</b><p>ご要望を伺います</p></div>
          <div class="d05-03-12-card"><span class="d05-03-12-n">02</span><b>設計</b><p>構成を設計します</p></div>
          <div class="d05-03-12-card"><span class="d05-03-12-n">03</span><b>制作</b><p>デザイン・実装</p></div>
          <div class="d05-03-12-card"><span class="d05-03-12-n">04</span><b>納品</b><p>公開・運用開始</p></div>
        </div>

CSS

.prev.d05-03-12{padding:0;align-items:stretch}
        .d05-03-12-scroll{width:100%;display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding:24px 20px;box-sizing:border-box}
        .d05-03-12-card{flex:0 0 130px;scroll-snap-align:center;background:#fff;border:1px solid #e6ebf3;border-radius:12px;padding:16px 14px;text-align:center;box-shadow:0 4px 12px rgba(30,50,90,.06)}
        .d05-03-12-n{display:block;font-size:22px;font-weight:800;color:#4f7cff;margin-bottom:8px}
        .d05-03-12-card b{display:block;font-size:13px;color:#1e293b;margin-bottom:4px}
        .d05-03-12-card p{margin:0;font-size:10.5px;color:#94a3b8}

クラス名 .d05-03-12 は本ライブラリ内での識別用です。複数のパーツを同じページで使う場合は、重複しないよう名前を変更してください。