CSS 縦書き

機能

• `writing-mode` による縦書き。列は右から左、または左から右
• `text-orientation` で数字とラテン文字の向きを選択
• 文字サイズ・列間隔・コンテナの高さを調整でき、プレビューが即座に追随
• 高さが列の折り返し位置を決める（最も忘れられやすい項目）
• 列間隔は 6 段階の固定倍率。「1.8 と 2 のどちらが良いか」で悩まなくて済む
• 出力は 1 つの CSS ルールのみ。セレクタは `.vertical-text`
• プレビューを確認してからコピー
• 処理はすべてブラウザ内で完結し、入力した文字は送信されません

使い方

1. 上の入力欄に文字を入力します
2. 列の進む向きと数字の向きを選びます
3. 文字サイズと高さを動かし、どこで折り返すか・1 画面に何列入るかを確認します
4. 納得したら CSS をコピーします

よくある質問

文字が下へ伸びるだけで折り返さないのはなぜですか？

高さを指定していないためです。縦書きの折り返しはコンテナの高さを使い切ったときに起きます。`height: auto`（あるいは高さのない親要素いっぱい）では列が永遠に尽きず、文字は無限に下へ伸びます。上の「コンテナの高さ」がそのための項目で、指定すれば複数列に折り返すのが確認できます。実際のプロジェクトでも同じで、縦書きのコンテナには確定した高さが必要です。でなければ貼った CSS はやはり「1 本の線」になります。

数字が横倒しになっています。正立にできますか？

できます。「数字と英字の向き」を正立（`text-orientation: upright`）に切り替えてください。それぞれ適した場面があります。横倒し（`mixed`）は読みやすく、数字や英単語はもともと横組みのものなので `2026-09-27` も一目で分かります。正立は整然としており、1 文字ずつ枡に収まるので縦書きの番号や扁額風の組み方に向きます。中国語の縦書きでは横倒しが一般的です。

出力が HTML ではなく CSS なのはなぜですか？

縦書きは見た目の問題であって構造の問題ではないからです。`<br>` で 1 文字ずつ改行すればそれらしく見えますが、テキストが分解されてしまいます。選択してコピーすると 1 行に 1 文字になり、検索や読み上げも壊れます。`writing-mode` ならブラウザが描画時に方向を扱うため、テキストはそのまま —— コピーでき、検索でき、スクリーンリーダーも正常に読めます。