CSSで縦書きを実装する完全ガイドと文字崩れの解決方法

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

ウェブサイトで日本語らしさを演出したいとき、縦書きのレイアウトはとても効果的な手段になります。書籍や新聞、和風のデザインを再現するために「CSSで縦書きにしたい」と考える方は多いのではないでしょうか。

ところが、実際に試してみると「数字が横向きに寝てしまう」「英字の向きがおかしい」といった悩みにぶつかりがちです。

個人的にウェブデザインの制作に携わってきた中で感じているのは、縦書きはwriting-modeという1つのプロパティさえ理解すれば、想像以上に簡単に実装できるということです。この記事では、基本の書き方から文字崩れの解決、ブラウザ対応まで、コピペで使えるコードとあわせて丁寧に解説していきます。

CSSの縦書きは writing-mode で実現する

縦書きの主役となるのがwriting-modeというプロパティです。これはテキストが進む方向、つまり行が横に進むのか縦に進むのかを指定する役割を持っています。

普段私たちが目にするウェブページは、文字が左から右へ、行が上から下へと流れる「横書き」です。この流れを変えるだけで、縦書きが完成します。

基本的な書き方はとてもシンプルです。

<p class="vertical-text">縦書きにしたい文章です</p>

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

これだけで、指定した要素が縦書きになります。たった1行のCSSで縦書きは実現できる。という手軽さが、このプロパティの魅力です。

writing-modeで使える3つの値

writing-modeには、覚えておきたい代表的な値が3つあります。それぞれの違いを理解しておくと、目的に合わせて選べるようになります。

日本語の縦書きでほとんどの場合に使うのはvertical-rlです。文庫本や雑誌のように、右から左へ行が進んでいく自然な読み方になります。

文書全体を縦書きにしたい場合は、html要素などのルート要素に指定するのが推奨されています。一方で、見出しや一部の段落だけ縦書きにしたいときは、その要素にクラスを付けて指定すれば大丈夫です。

数字や英字が横向きになる問題を解決する

縦書きを実装して最初にぶつかる壁が、この「文字崩れ」です。縦書きにしたのに、数字や英字だけが横向きに寝てしまう、という状態に多くの方が悩まされます。

これは不具合ではなく、CSSの初期設定による自然な挙動です。そして、その解決に使うのがtext-orientationというプロパティです。

text-orientationで文字の向きを制御する

text-orientationは、縦書きのときに1文字ずつの向きを「正立させる（縦のまま）」のか「横向きに寝かせる」のかを制御します。3つの値を押さえておきましょう。

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

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

これで、寝ていた数字や英字がきちんと縦向きに立ちます。text-orientation: upright で文字崩れは解決できる。と覚えておくと安心です。

2桁以上の数字をまとめる text-combine-upright

「令和6年」「12月」のように、2桁の数字を1文字分の幅にまとめて表示したいときがあります。そんなときに活躍するのがtext-combine-uprightです。

<p class="vertical-text">昭和<span class="tcy">56</span>年</p>

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

この指定により、「56」が横並びのまま1文字分のスペースにきれいに収まります。年号や日付を縦書きで表示するときに、とても自然な見た目になります。

実務で使える縦書きレイアウトの応用

基本を押さえたら、次はデザインに活かす応用テクニックを見ていきましょう。縦書きは、ちょっとした工夫でぐっと本格的な仕上がりになります。

縦書きテキストを中央寄せにする

縦書きの場合、text-alignは「上下方向」の揃えに働きます。縦のラインを中央に配置したいときは、display: inline-block と組み合わせるのが定番の方法です。

.wrapper {
  text-align: center;
}
.vertical-text {
  writing-mode: vertical-rl;
  display: inline-block;
}

縦書きで段組みを作る

長い文章を縦書きにするなら、新聞や雑誌のような段組みが読みやすさを高めます。column-count と column-gap を使うと実現できます。

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

高さを固定することで、テキストが自動的に複数の段に流れ込み、書籍のような読み物ページが作れます。

ブラウザ対応と旧ブラウザへの配慮

writing-modeは、Chrome、Safari、Firefox、Edgeといった現在の主要ブラウザで問題なく動作します。そのため、最新のウェブサイトであれば安心して使える機能です。

一方で、古いInternet Explorer（IE）への対応が必要な場合は、専用の記述を併記しておくと安全です。

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

IEでは、divなどのグループ化する要素に対して指定する必要があると解説されるケースもあります。近年はIE対応の必要性が減っていますが、業務要件で求められる場合は覚えておくと役立ちます。

ウェブデザイン全体の表現力を高める手法としては、CSSアニメーションの実装方法とあわせて学ぶと、より印象的なページ作りにつながります。

縦書きCSSでよくある質問

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

text-orientationの初期値が mixed になっているためです。これは仕様通りの挙動で、text-orientation: upright を指定すれば数字も縦向きに立ちます。

vertical-rl と vertical-lr の違いは何ですか

どちらも縦書きですが、行の進む方向が異なります。vertical-rl は行が右から左へ、vertical-lr は左から右へ進みます。日本語の書籍と同じにしたいなら vertical-rl を選びましょう。

ページ全体を縦書きにするにはどうすればよいですか

html要素やbody要素にwriting-modeを指定すれば、ページ全体が縦書きになります。ただし影響範囲が広いため、まずは一部の要素で試してから全体に適用するのがおすすめです。

縦書きにしたときの句読点の位置がずれるのですが

ブラウザによって句読点の表示位置が異なる場合があります。多くの場合はフォントの指定を見直すことで改善します。日本語フォントを明示的に指定すると安定しやすくなります。

縦書きと横書きを1つのページで混在させられますか

可能です。要素ごとにクラスを付けてwriting-modeを指定すれば、縦書きと横書きを自由に組み合わせられます。見出しだけ縦書きにするといった部分的な使い方も問題ありません。

まとめ

CSSの縦書きは、writing-mode: vertical-rl という基本さえ押さえれば、決して難しいものではありません。数字が寝る問題は text-orientation、桁数のまとめは text-combine-upright と、悩みごとに対応するプロパティが用意されています。

まずは小さな要素で縦書きを試し、文字の向きや配置を確認しながら少しずつ範囲を広げていくのがおすすめです。和風のデザインや読み物コンテンツで、ぜひ縦書きの表現を活かしてみてください。