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

宛名ラベル・シール風デザイン

ミシン目で区切られた宛名ラベルシートの構成。発送案内ページや会員証発行の見本表示に利用できます。

staticcss

プレビュー

ソースコード

HTML

<div class="labelsheet">
          <div class="lb-cell">
            <p class="lb-zip">〒150-0001</p>
            <p class="lb-addr">東京都渋谷区神宮前1-2-3</p>
            <p class="lb-name">佐藤 花子 様</p>
          </div>
          <div class="lb-cell">
            <p class="lb-zip">〒150-0001</p>
            <p class="lb-addr">東京都渋谷区神宮前1-2-3</p>
            <p class="lb-name">佐藤 花子 様</p>
          </div>
        </div>

CSS

.d01-12-11{ background:#eef0ef; }
        .d01-12-11 .labelsheet{ width:100%; max-width:260px; display:flex; flex-direction:column; }
        .d01-12-11 .lb-cell{ background:#fff; border:1px dashed #b7bdba; padding:12px 14px; margin-bottom:-1px; }
        .d01-12-11 .lb-zip{ font-size:10px; color:#667; margin:0 0 4px; }
        .d01-12-11 .lb-addr{ font-size:11px; color:#333; margin:0 0 6px; }
        .d01-12-11 .lb-name{ font-size:12px; font-weight:700; color:#222; margin:0; }

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