パーツ番号 02-13-09 ・ CSSのみ

縦書きメニュー項目リスト

黒板風の背景に縦書きの品目を並べた飲食店メニューの見本です。WordPressで作る和食店・カフェのメニューページやおすすめ紹介ブロックに使えます。

staticcss

プレビュー

ソースコード

HTML

<div class="d02-13-09-wrap">
          <p class="d02-13-09-item">本日のおすすめ</p>
          <p class="d02-13-09-item">季節の御膳</p>
          <p class="d02-13-09-item">特製丼ぶり</p>
        </div>

CSS

.d02-13-09{background:#1c1917}
        .d02-13-09-wrap{display:flex;flex-direction:row-reverse;gap:16px;height:100%;align-items:center;justify-content:center}
        .d02-13-09-item{writing-mode:vertical-rl;text-orientation:upright;font-family:"游明朝","Yu Mincho",serif;font-size:14px;line-height:2;color:#fafaf9;margin:0;letter-spacing:.08em;padding:0 4px;border-left:1px solid #44403c}

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