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

招待状風デザイン

装飾枠と丁寧な文面を配したフォーマルな招待状の構成。式典やセミナー案内のページに応用できます。

staticcss

プレビュー

ソースコード

HTML

<div class="invite">
          <p class="ic-sub">ご 招 待 状</p>
          <h4 class="ic-ttl">結婚披露宴のご案内</h4>
          <p class="ic-body">謹啓　時下ますますご清祥のこととお慶び申し上げます</p>
          <p class="ic-date">2026年10月18日</p>
        </div>

CSS

.d01-12-04{ background:#f7f4ef; }
        .d01-12-04 .invite{ width:100%; max-width:250px; padding:24px 18px; text-align:center; background:#fffdf8; border:1px solid #c9b98f; box-shadow:inset 0 0 0 4px #fffdf8, inset 0 0 0 5px #c9b98f; }
        .d01-12-04 .ic-sub{ font-size:11px; letter-spacing:.3em; color:#9a8352; margin:0 0 10px; }
        .d01-12-04 .ic-ttl{ font-size:16px; color:#3a3226; margin:0 0 12px; font-weight:700; }
        .d01-12-04 .ic-body{ font-size:11px; color:#6b6252; line-height:1.7; margin:0 0 12px; }
        .d01-12-04 .ic-date{ font-size:11px; color:#9a8352; margin:0; letter-spacing:.05em; }

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