パーツ番号 11-11-12 ・ CSSのみ

横スクロール無限カルーセルの見た目

右端がフェードして続きがあることを示す横並びカードカルーセルの静止見本です。関連記事や商品のヨコ方向無限スクロール欄のデザイン確認に使えます。

staticcss

プレビュー

ソースコード

HTML

<div class="d11-11-12-frame">
          <p class="d11-11-12-title">おすすめ記事</p>
          <div class="d11-11-12-row">
            <span class="d11-11-12-card"></span>
            <span class="d11-11-12-card"></span>
            <span class="d11-11-12-card"></span>
            <span class="d11-11-12-card d11-11-12-fade"></span>
          </div>
        </div>

CSS

.d11-11-12-frame{ width:280px; background:#fff; border:1px solid #e5e7eb; border-radius:14px; padding:14px; }
        .d11-11-12-title{ margin:0 0 10px; font-size:11.5px; font-weight:700; color:#374151; }
        .d11-11-12-row{ display:flex; gap:8px; overflow:hidden; }
        .d11-11-12-card{ flex:0 0 auto; width:64px; height:64px; border-radius:10px; background:linear-gradient(135deg,#c7d2fe,#e0e7ff); }
        .d11-11-12-fade{ background:linear-gradient(90deg,#c7d2fe,#fff); }

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