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

領収書・レシート風デザイン

罫線区切りの明細リストを持つレシート風の構成。注文確認画面や購入履歴の表示に利用できます。

staticcss

プレビュー

ソースコード

HTML

<div class="receipt">
          <p class="rc-h">Cafe Ren 領収書</p>
          <div class="rc-row"><span>ブレンドコーヒー</span><span>￥480</span></div>
          <div class="rc-row"><span>チーズケーキ</span><span>￥520</span></div>
          <div class="rc-row"><span>サンドイッチ</span><span>￥650</span></div>
          <div class="rc-line"></div>
          <div class="rc-row rc-total"><span>合計</span><span>￥1,650</span></div>
        </div>

CSS

.d01-12-05{ background:#f4f4f4; }
        .d01-12-05 .receipt{ width:100%; max-width:220px; padding:18px 20px; background:#fff; font-family:'Courier New',monospace; box-shadow:0 2px 6px rgba(0,0,0,.08); }
        .d01-12-05 .rc-h{ font-size:12px; text-align:center; margin:0 0 12px; font-weight:700; color:#333; }
        .d01-12-05 .rc-row{ display:flex; justify-content:space-between; font-size:11px; color:#444; margin-bottom:6px; }
        .d01-12-05 .rc-line{ border-top:1px dashed #999; margin:8px 0; }
        .d01-12-05 .rc-total{ font-weight:700; color:#111; }

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