文字を縦書きにする方法【CSS】

この記事の前提条件

対象: CSS(全モダンブラウザ対応)
難易度: ★☆☆
所要時間: 約5分

和風・和食のお店のサイトや、小説・詩を掲載するページで見かける縦書きのテキスト。画像として作り込む必要はなく、CSSのwriting-modeプロパティだけで、テキストのまま縦書き表示にできます。テキストのままなので、検索エンジンにもきちんと読まれますし、コピー&ペーストも可能です。

目次非表示

writing-modeで縦書きにする
数字だけ横向きにしたい時: text-orientation / text-combine-upright
まとめ

目次へ

writing-modeで縦書きにする

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

vertical-rlは「Vertical(縦)・Right to Left(右から左)」の略で、日本語の縦書き(右上から左下に向かって読み進める)と同じ向きになります。これを指定するだけで、文章全体が縦書きに変わります。

数字だけ横向きにしたい時: text-orientation / text-combine-upright

縦書きにすると、日付や電話番号などの半角数字も縦に1文字ずつ並んでしまい、読みにくくなります。2桁までの数字を横向きのまま並べて表示するには、text-combine-uprightを使います。

.vertical-text .number {
  text-combine-upright: digits 2; /* 2桁までの数字を横並びで表示 */
}

「2026年9月」のような日付表記も、これを使えば数字部分だけ読みやすい横向きの並びになります。数字を含むテキストを縦書きにする際は、まず候補に入れておきたいプロパティです。

⚠️ 縦書きにする実務での注意点

縦書きは雰囲気作りには効果的ですが、スマホの縦長画面では文章が横に長く伸びてしまい、スクロールバーが横方向にも出て読みにくくなることがあります。長文の本文全体を縦書きにするのではなく、キャッチコピーや見出しなど、短いテキストにポイントで使うのがおすすめです。長文を縦書きにしたい場合は、あらかじめheightやoverflow-x: auto;で表示範囲を制御しておきましょう。