パーツ番号 01-09-03 ・ CSSのみ

写真主体のフォトエッセイレイアウト

大きな写真枠と短いキャプションのみで構成した誌面。文章を最小限にし、画像の印象を前面に出したいページに用いる。

staticcss

プレビュー

ソースコード

HTML

<div class="d01-09-03-wrap">
          <div class="d01-09-03-photo"></div>
          <p class="d01-09-03-cap"><strong>01</strong> 朝霧に沈む港町の情景。</p>
        </div>

CSS

.d01-09-03{background:#fafafa;}
        .d01-09-03-wrap{width:100%;height:100%;display:flex;flex-direction:column;gap:10px;}
        .d01-09-03-photo{flex:1;background:linear-gradient(160deg,#9fb8c9,#3f5f74 60%,#24384a);border-radius:3px;}
        .d01-09-03-cap{margin:0;font-size:11px;color:#555;line-height:1.5;}
        .d01-09-03-cap strong{color:#24384a;margin-right:6px;}

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