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

メニュー表(飲食店)風デザイン

品名と価格が並ぶメニュー表の構成。飲食店サイトの料理紹介やコース案内の表示に利用できます。

staticcss

プレビュー

ソースコード

HTML

<div class="menu">
          <p class="mn-h">— MENU —</p>
          <div class="mn-row"><span>本日のパスタ</span><span>¥1,200</span></div>
          <div class="mn-row"><span>マルゲリータ</span><span>¥1,400</span></div>
          <div class="mn-row"><span>季節のサラダ</span><span>¥900</span></div>
          <div class="mn-row"><span>ティラミス</span><span>¥700</span></div>
        </div>

CSS

.d01-12-09{ background:#fbf8f2; }
        .d01-12-09 .menu{ width:100%; max-width:250px; padding:20px; background:#fffef9; border:1px solid #d8cdae; }
        .d01-12-09 .mn-h{ font-size:11px; letter-spacing:.2em; text-align:center; color:#8a7550; margin:0 0 14px; }
        .d01-12-09 .mn-row{ display:flex; justify-content:space-between; align-items:baseline; font-size:12px; color:#3a3226; margin-bottom:10px; border-bottom:1px dotted #d8cdae; padding-bottom:6px; }
        .d01-12-09 .mn-row span:last-child{ color:#8a5a2a; font-weight:700; }

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