縦書き和文タイトル（明朝体）
CSS の writing-mode:vertical-rl で組まれた、縦書きの和文タイトルです。右から左へ縦に流れる日本語の組版を再現し、明朝体（ Hiragino Mincho ProN や Yu Mincho ）を指定することで、和の落ち着いた品格を出しています。
解説
CSS の writing-mode:vertical-rl で組まれた、縦書きの和文タイトルです。右から左へ縦に流れる日本語の組版を再現し、明朝体（Hiragino Mincho ProN や Yu Mincho）を指定することで、和の落ち着いた品格を出しています。letter-spacing:.3em と line-height:1.9 でゆったりとした字間・行間をとり、height:300px で縦の表示領域を確保しているのが要点です。JavaScript は不要です。
ぴったりのサイト
- 和食店・料亭・呉服店など和テイストのブランド見出し
- 伝統工芸・神社仏閣・茶道など日本文化を扱うページ
- 縦組みで情緒を出したいキャッチコピー
字間は letter-spacing、行間（縦書きでは列の間隔）は line-height で調整します。縦書きでは英数字の向きが横倒しになることがあるため、必要に応じて text-orientation を併用すると整います。表示の高さを height で十分に確保しないと文字が見切れるので、文字数に合わせて調整してください。明朝体が端末にない場合に備え、serif をフォールバックに置いています。動きがなく軽量です。
使用例・適したシーン
- ヒーローセクションのキャッチコピー
- セクション見出し
- 記事タイトル・ブログのリード
- コーポレートサイトのキービジュアル
よくある質問
英数字が横に倒れてしまいます。直せますか？
text-orientation: upright を加えると英数字も縦向きに立てられます。ただし数字の桁が多いと読みにくくなるため、混在する場合は span で囲んで個別に向きを調整する方法もあります。
文字が見切れるときはどうすれば？
.vj-title の height を文字数に合わせて広げてください。縦書きは高さで表示量が決まるため、文章が長い場合は height を増やすか、line-height を詰めて列を増やすと収まります。