パーツ番号 01-12-10 ・ CSSのみ

ポストカード風デザイン

表面に大きな写真枠、余白に一言メッセージを配したポストカードの構成。旅行記や日記ページに利用できます。

staticcss

プレビュー

ソースコード

HTML

<div class="postcard">
          <div class="pc-photo">PHOTO</div>
          <div class="pc-msg">
            <p>拝啓　旅先より一筆。</p>
            <p>穏やかな海辺の町で過ごしています。</p>
          </div>
        </div>

CSS

.d01-12-10{ background:#eef4f6; }
        .d01-12-10 .postcard{ width:100%; max-width:270px; background:#fff; border:1px solid #cfd8db; box-shadow:0 2px 6px rgba(0,0,0,.07); display:flex; flex-direction:column; }
        .d01-12-10 .pc-photo{ height:110px; background:#c9d6da; color:#5a6a6d; font-size:11px; letter-spacing:.15em; display:flex; align-items:center; justify-content:center; }
        .d01-12-10 .pc-msg{ padding:14px 16px; }
        .d01-12-10 .pc-msg p{ font-size:11px; color:#455; margin:0 0 6px; line-height:1.6; }

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