CSSで縦書きする

1. writing-modeの基本
   writing-modeを使うと、Webページのテキストを縦書きに変更できる。
   デフォルト（横書き）: horizontal-tb
   一般的な縦書き（右→左）: vertical-rl
   珍しい縦書き（左→右）: vertical-lr
   横向きのまま縦書き: sideways-rl, sideways-lr（デザイン向き）
2. 縦書きのレイアウト調整
   位置調整（Flexboxを利用）
   右寄せ: justify-content: flex-end;
   中央寄せ: justify-content: center;
   左寄せ: justify-content: flex-start;
   行間調整: line-heightで調整し、行が広がりすぎるのを防ぐ。
3. 縦書き特有の課題と解決策
   英数字や記号の回転: text-orientation: upright; を使用。
   数字や英字を1文字幅で表示: text-combine-upright: all; で対応。
   ルビの付け方: タグと ruby-position: over; を使う。
4. ブラウザ対応
   Chrome, Firefox, Safari, Edge で基本的にサポート。
   互換性を確保するためにベンダープレフィックスを使用：
   css
   .vertical-text {
   -webkit-writing-mode: vertical-rl;
   -moz-writing-mode: vertical-rl;
   -ms-writing-mode: tb-rl;
   writing-mode: vertical-rl;
   }
5. まとめ
   writing-modeを活用すれば簡単に縦書きを実現できる。
   flexbox でテキスト位置を調整。
   text-orientation で英数字の表示を最適化。
   ruby タグでルビ対応も可能。
   ブラウザ対応を考慮してコーディングする。

参考記事
https://webmagic-lab.com/css-writing-mode/