パーツ番号 02-07-21 ・ CSSのみ

縦書き見出し

writing-modeによる縦書き表示の見出し。動きは伴わない静止表現で、和風サイトのサイドタイトルなどに使える。

staticcss

プレビュー

ソースコード

HTML

<div class="wrap">
          <h4 class="ttl">季節のご案内</h4>
        </div>

CSS

.d02-07-21 .wrap{ display:flex; justify-content:center; }
        .d02-07-21 .ttl{ all:unset; writing-mode:vertical-rl; font-size:22px; font-weight:800; color:#1f2937; letter-spacing:.15em; height:180px; }

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