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

画像下の斜体キャプション

写真の直下にイタリック体の説明文を添えるシンプルなキャプション。ブログ記事やギャラリーページの画像説明に使える。

staticcss

プレビュー

ソースコード

HTML

<div class="photo">
          <span class="ph-txt">Photo</span>
        </div>
        <p class="cap">静かな朝の光が差し込む書斎の様子。</p>

CSS

.d02-14-01{ display:flex; flex-direction:column; gap:8px; }
        .d02-14-01 .photo{ height:150px; border-radius:8px; background:linear-gradient(135deg,#e2e8f0,#cbd5e1); display:flex; align-items:center; justify-content:center; }
        .d02-14-01 .ph-txt{ font-size:13px; color:#64748b; font-weight:600; letter-spacing:0.05em; }
        .d02-14-01 .cap{ all:unset; display:block; font-size:13px; font-style:italic; color:#64748b; line-height:1.5; padding:0 2px; }

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