パーツ番号 02-14-12 ・ CSSのみ

ページ送り風インデックスキャプション

現在の枚数と総数を「03 / 08」のように示すインデックス表記付きキャプション。写真ギャラリーやスライダーの静止プレビュー画像の説明に使える。

staticcss

プレビュー

ソースコード

HTML

<div class="photo">
          <span class="ph-txt">Photo</span>
        </div>
        <div class="idx-row">
          <span class="idx-cur">03</span><span class="idx-sep">/</span><span class="idx-total">08</span>
          <span class="idx-cap">京都 嵐山、渡月橋からの眺め</span>
        </div>

CSS

.d02-14-12{ display:flex; flex-direction:column; gap:10px; }
        .d02-14-12 .photo{ height:150px; border-radius:8px; background:linear-gradient(135deg,#bae6fd,#38bdf8); display:flex; align-items:center; justify-content:center; }
        .d02-14-12 .ph-txt{ font-size:13px; color:#0c4a6e; font-weight:600; }
        .d02-14-12 .idx-row{ display:flex; align-items:baseline; gap:6px; }
        .d02-14-12 .idx-cur{ font-size:15px; font-weight:800; color:#0284c7; }
        .d02-14-12 .idx-sep{ font-size:12px; color:#cbd5e1; }
        .d02-14-12 .idx-total{ font-size:12px; color:#94a3b8; font-weight:600; }
        .d02-14-12 .idx-cap{ margin-left:6px; font-size:12px; color:#64748b; }

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