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

賞状・認定証風デザイン

中央装飾枠と署名欄を持つ賞状デザイン。修了証や受賞ページの静的な表示に利用できます。

staticcss

プレビュー

ソースコード

HTML

<div class="cert">
          <p class="ce-sub">CERTIFICATE OF COMPLETION</p>
          <h4 class="ce-ttl">認 定 証</h4>
          <p class="ce-name">佐藤 花子　殿</p>
          <p class="ce-body">上記の者は所定の課程を修了したことを証します</p>
          <p class="ce-sign">代表　鈴木 一郎</p>
        </div>

CSS

.d01-12-06{ background:#f8f6ee; }
        .d01-12-06 .cert{ width:100%; max-width:250px; padding:20px 16px; text-align:center; background:#fffef9; border:2px solid #a88a3f; }
        .d01-12-06 .ce-sub{ font-size:9px; letter-spacing:.15em; color:#a88a3f; margin:0 0 8px; }
        .d01-12-06 .ce-ttl{ font-size:18px; color:#3a3020; margin:0 0 10px; font-weight:800; letter-spacing:.1em; }
        .d01-12-06 .ce-name{ font-size:13px; color:#333; margin:0 0 8px; font-weight:700; }
        .d01-12-06 .ce-body{ font-size:10px; color:#666; line-height:1.6; margin:0 0 10px; }
        .d01-12-06 .ce-sign{ font-size:10px; color:#555; margin:0; border-top:1px solid #c9b98f; padding-top:6px; display:inline-block; }

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