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

チラシ風告知デザイン

大見出しと日時・会場情報を配したイベントチラシ風の構成。店舗やイベントの告知バナーに応用できます。

staticcss

プレビュー

ソースコード

HTML

<div class="flyer">
          <span class="tagline">SUMMER EVENT</span>
          <h4 class="ttl">夏祭りマルシェ</h4>
          <p class="dt">2026年8月2日(日) 10:00-16:00</p>
          <p class="pl">会場：中央公園 特設広場</p>
        </div>

CSS

.d01-12-02{ background:#fff5e9; }
        .d01-12-02 .flyer{ width:100%; max-width:250px; padding:20px; background:#fff; border:3px solid #d9772f; text-align:center; }
        .d01-12-02 .tagline{ display:inline-block; font-size:10px; letter-spacing:.15em; color:#d9772f; font-weight:700; margin-bottom:8px; }
        .d01-12-02 .ttl{ font-size:22px; margin:0 0 12px; color:#3a2a1a; font-weight:800; }
        .d01-12-02 .dt{ font-size:12px; color:#5a4a3a; margin:0 0 4px; }
        .d01-12-02 .pl{ font-size:12px; color:#5a4a3a; margin:0; }

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