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

チケット風デザイン(ミシン目付き)

半券風の点線区切りを配したチケットデザイン。イベント告知や特典クーポンの表現に利用できます。

staticcss

プレビュー

ソースコード

HTML

<div class="ticket">
          <div class="tk-main">
            <span class="tk-label">ADMIT ONE</span>
            <p class="tk-ttl">音楽フェスティバル</p>
            <p class="tk-sub">2026.09.12 開場 17:00</p>
          </div>
          <div class="tk-stub">
            <span class="tk-no">No.0158</span>
          </div>
        </div>

CSS

.d01-12-03{ background:#eef2f6; }
        .d01-12-03 .ticket{ display:flex; width:100%; max-width:270px; background:#fff; border:1px solid #ccd3da; box-shadow:0 2px 5px rgba(0,0,0,.05); }
        .d01-12-03 .tk-main{ flex:1; padding:16px; border-right:2px dashed #b9c1c9; }
        .d01-12-03 .tk-label{ font-size:9px; letter-spacing:.12em; color:#3c6ea5; font-weight:700; }
        .d01-12-03 .tk-ttl{ font-size:15px; font-weight:700; color:#233; margin:8px 0 4px; }
        .d01-12-03 .tk-sub{ font-size:11px; color:#667; margin:0; }
        .d01-12-03 .tk-stub{ width:56px; display:flex; align-items:center; justify-content:center; }
        .d01-12-03 .tk-no{ font-size:10px; color:#889; writing-mode:vertical-rl; letter-spacing:.1em; }

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