最近便利なCSSおれおれAdvent Calendar 2023 – 12 日目

縦書きにできます。

あんまり全体を縦書きにしたい場面はないというかしないで欲しいんですが（読みづらいので）、表の細い列の見出しとかでどうでしょうか。

例

.Table > thead > tr > th {
  writing-mode: vertical-rl;
}

英字も縦書きに

日本語は文字の向きを維持したまま縦書きになる（要は普通に縦書きになる）んだけど、英字は文字が 90 度回転します。まあそれは仕方ない。

英字の文字も日本語とかと同じようにする場合は text-orientation: upright; も組み合わせます。

.Table > thead > tr > th {
  text-orientation: upright;
  writing-mode: vertical-rl;
}

よくわかんなければ MDN のデモを見てみてください。

おしまい

ウェブページ自体を縦書きにするのはあんまりおすすめしませんが、それ以外の場面でも良さそうな使い方ってあんまりないかなと思います。だいたいやめた方が良い。

参考