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

封筒・レターヘッド風デザイン

ロゴと差出人情報を配したレターヘッドの構成。案内状や公式文書のヘッダー部分に応用できます。

staticcss

プレビュー

ソースコード

HTML

<div class="letterhead">
          <div class="lh-top">
            <span class="lh-logo">AOI</span>
            <p class="lh-co">葵商事株式会社</p>
          </div>
          <div class="lh-line"></div>
          <p class="lh-addr">〒100-0001 東京都千代田区1-2-3</p>
          <p class="lh-addr">TEL 03-9876-5432</p>
        </div>

CSS

.d01-12-07{ background:#eef1ee; }
        .d01-12-07 .letterhead{ width:100%; max-width:260px; padding:20px; background:#fff; border-top:5px solid #34584a; box-shadow:0 2px 6px rgba(0,0,0,.06); }
        .d01-12-07 .lh-top{ display:flex; align-items:center; gap:10px; margin-bottom:12px; }
        .d01-12-07 .lh-logo{ width:30px; height:30px; background:#34584a; color:#fff; font-size:11px; font-weight:700; display:flex; align-items:center; justify-content:center; }
        .d01-12-07 .lh-co{ font-size:13px; font-weight:700; color:#233; margin:0; }
        .d01-12-07 .lh-line{ height:1px; background:#dfe4e1; margin:0 0 10px; }
        .d01-12-07 .lh-addr{ font-size:10px; color:#667; margin:0 0 3px; }

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