CSSで縦書きを実装する方法とレイアウト調整の完全ガイド

折原 慧ウェブデザインデイ 編集ライター

日本語のWebサイトを制作していると、「小説風の縦書きにしたい」「和風デザインで文章を縦に流したい」という場面に出会うことがあります。かつては画像で対応するしかなかった縦書きも、今ではCSSのプロパティを数行書くだけで実現できるようになりました。

ただ、実際に試してみると「英数字だけ横向きになってしまう」「思ったところで折り返さない」といった細かい問題にぶつかりがちです。

個人的にコーポレートサイトの和風ページを制作した際も、writing-modeを指定しただけでは思うような見栄えにならず、text-orientationや縦中横の調整を重ねてようやく納得のいく形になりました。

この記事では、縦書きの基本から英数字の扱い、レイアウト調整、ブラウザ対応まで、コピペで使えるコードとともに順を追って解説します。

CSSで縦書きにする基本のwriting-mode

縦書きの主役となるのがwriting-modeというプロパティです。

これは「テキストの行を横方向に並べるか、縦方向に並べるか」を決めるためのもので、ブロックが流れる方向まで制御します。難しく考える必要はなく、まずは値を指定するだけで縦書きになります。

代表的な3つの値を整理しておきましょう。

• horizontal-tb：標準の横書き。行は上から下へ流れます
• vertical-rl：縦書きで行が右から左へ流れる。日本語書籍と同じ方向です
• vertical-lr：縦書きで行が左から右へ流れる。特殊なデザイン用途向けです

最も基本的な指定は次の通りです。

.tategaki {
  writing-mode: vertical-rl;
}

この2行だけで、対象要素のテキストが縦書きになります。日本語の縦書きは基本的にvertical-rlを選んでおけば間違いありません。

ページ全体を縦書きにしたい場合は、bodyに指定する方法もあります。

body {
  writing-mode: vertical-rl;
}

CSS Writing Modes仕様の日本語訳でも、縦組みは「テキスト行を縦方向に配置し、ブロックの進行方向が左方または右方になる」と説明されています。

英数字や記号の向きを制御する方法

縦書きにして最初に戸惑うのが、英数字の扱いです。

writing-modeだけを指定すると、日本語は正しく縦に並ぶのに、英字や数字だけが横倒しになってしまいます。これは初期状態の仕様であり、バグではありません。

ここで登場するのがtext-orientationです。縦書き時に文字を回転させるかどうかを制御します。

• mixed：初期値。日本語は縦、英数字は横向きになります
• upright：すべての文字を立てて表示。英数字も縦に並びます
• sideways：すべて右向きに寝かせて表示します

英字や数字も縦方向に並べたい場合は、uprightを指定します。

p {
  writing-mode: vertical-rl;
  text-orientation: upright;
}

数字だけを横並びにする縦中横

「2024」のような数字は、縦に一文字ずつ並ぶより横に組んだ方が読みやすくなります。この処理を縦中横（たてちゅうよこ）と呼びます。

text-combine-uprightプロパティを使い、対象の数字をspanなどで囲んで指定します。

.tcy {
  text-combine-upright: all;
}

<p class="tategaki">昭和<span class="tcy">64</span>年</p>

これで2桁の数字が横並びで一文字分のスペースに収まり、書籍のような自然な見た目になります。

縦書きレイアウトを美しく整えるコツ

縦書きは指定して終わりではなく、配置の調整で仕上がりが大きく変わります。

まず重要なのが高さの指定です。縦書きでは要素の高さが「1行の長さ」になるため、heightを指定しないとブラウザ幅いっぱいまで文字が続いてしまいます。

.tategaki {
  writing-mode: vertical-rl;
  height: 400px;
}

長文を扱う場合は、段組みを使うと書籍のように複数列で表示できます。

.tategaki {
  writing-mode: vertical-rl;
  height: 400px;
  column-count: 2;
  column-gap: 2em;
}

中央寄せしたい場合は、親要素でmarginやFlexboxを使って調整します。縦書き特有のクセとして、text-alignは行方向（縦）に効くため、横位置の調整には親要素側の指定が必要になる点を覚えておくと戸惑いません。

ブラウザ対応とベンダープレフィックス

writing-modeは主要な最新ブラウザで問題なく動作しますが、Safariや古い環境では追加の記述が安心です。

Safari向けには-webkit-writing-mode、古いInternet Explorer向けには-ms-writing-mode: tb-rlを併記するのが定番です。

.tategaki {
  -webkit-writing-mode: vertical-rl; /* Safari用 */
  -ms-writing-mode: tb-rl;           /* IE用 */
  writing-mode: vertical-rl;
}

レスポンシブで縦書きを切り替える

PCでは横書き、スマホでは縦書きといった切り替えも、メディアクエリで実現できます。

@media (max-width: 768px) {
  .tategaki {
    writing-mode: vertical-rl;
  }
}

ただし、縦書きはスクロール方向も変わるため、画面幅の狭い端末では横スクロールが発生しやすくなります。CSSでレイアウトを扱う際の考え方はCSSアニメーションの実装解説とも共通する部分が多く、要素の親子関係を意識すると崩れを防ぎやすくなります。和風デザインの参考にしたい場合は、ウェブデザインの参考事例も合わせて眺めてみると発想が広がります。

よくある質問

縦書きにすると英数字が横向きになるのはなぜですか

text-orientationの初期値がmixedのため、英数字は横向きで表示される仕様です。すべて縦に並べたい場合はuprightを、数字だけ横組みにしたい場合はtext-combine-uprightによる縦中横を使い分けます。

vertical-rlとvertical-lrはどちらを使えばよいですか

日本語の書籍や新聞と同じ右から左へ流れる方向にするなら、vertical-rlを選びます。vertical-lrは行が左から右へ進むため、日本語の一般的な縦書きには向きません。特別なデザイン意図がなければvertical-rlで問題ありません。

縦書きで文章が途中で切れてしまいます

縦書きでは要素の高さが1行の長さになるため、heightを適切に指定していないと表示が崩れることがあります。height指定に加え、長文なら段組みを使うと自然に収まります。

ページ全体を縦書きにしても大丈夫ですか

bodyにwriting-modeを指定すれば全体を縦書きにできますが、ナビゲーションやフォームなど横書き前提の要素が読みにくくなる場合があります。部分的に横書きへ戻すなど、要素ごとの調整が現実的です。

古いブラウザでも縦書きは表示できますか

現在の主要ブラウザはほぼ対応していますが、Safariでは-webkit-writing-mode、古いIEでは-ms-writing-mode: tb-rlの併記が安心です。ただしIEのサポートは終了しているため、実務では最新ブラウザ対応を優先するのが一般的です。

まとめ

CSSの縦書きは、writing-mode: vertical-rlという一行から始められます。

そこにtext-orientationや縦中横で文字の向きを整え、高さや段組みでレイアウトを仕上げていけば、書籍のような美しい縦書きページが完成します。プレフィックスの併記でブラウザ対応も万全です。

まずは小さな要素にvertical-rlを指定して、実際の表示を確認するところから始めてみてください。手を動かしながら微調整を重ねることで、和文レイアウトの感覚が自然と身についていくはずです。