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

日付+カテゴリの複合キャプション

日付とカテゴリを中黒で区切って横並びにした複合キャプション。ニュース一覧や更新情報の投稿メタ情報に使える。

staticcss

プレビュー

ソースコード

HTML

<div class="photo">
          <span class="ph-txt">Photo</span>
        </div>
        <div class="meta-line">
          <span class="date">2026.07.10</span>
          <span class="sep">&#183;</span>
          <span class="cat">レポート</span>
        </div>

CSS

.d02-14-08{ display:flex; flex-direction:column; gap:10px; }
        .d02-14-08 .photo{ height:140px; border-radius:8px; background:linear-gradient(135deg,#a7f3d0,#34d399); display:flex; align-items:center; justify-content:center; }
        .d02-14-08 .ph-txt{ font-size:13px; color:#065f46; font-weight:600; }
        .d02-14-08 .meta-line{ display:flex; align-items:center; gap:8px; }
        .d02-14-08 .date{ font-size:12px; color:#6b7280; font-weight:600; }
        .d02-14-08 .sep{ color:#d1d5db; }
        .d02-14-08 .cat{ font-size:12px; color:#059669; font-weight:700; }

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