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

縦中横(たてちゅうよこ)日付表記

縦書きの中に半角数字を横向きのまま組み込む縦中横を使った日付表記の見本です。WordPressのイベント告知や案内状ページの日付表示に使えます。

staticcss

プレビュー

ソースコード

HTML

<div class="d02-13-06-wrap">
          <p class="d02-13-06-text">令和<span class="d02-13-06-tcy">7</span>年<span class="d02-13-06-tcy">12</span>月<span class="d02-13-06-tcy">25</span>日 開催</p>
        </div>

CSS

.d02-13-06{background:#fff}
        .d02-13-06-wrap{height:100%;display:flex;align-items:center}
        .d02-13-06-text{writing-mode:vertical-rl;text-orientation:upright;font-family:"游明朝","Yu Mincho",serif;font-size:19px;line-height:2;letter-spacing:.08em;color:#1a1d24;margin:0}
        .d02-13-06-tcy{text-combine-upright:all;-webkit-text-combine:horizontal}

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