CSSで縦書きを実現！writing-modeの使い方と注意点まとめ

いつも横書きばかりじゃ物足りない…そんなときに活躍するのが、縦書きレイアウト！
CSSの writing-mode を使えば、日本語はもちろん、英字や記号も含めた縦組み表現が簡単に実現できます。

この記事では、印刷物のようなデザインや、ちょっと和風な雰囲気を出したいときに便利な、CSSでできる縦書きの基本と応用ポイントをご紹介します。

CSSだけで縦書きにできる！

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

上記のように、writing-mode を使うことで、横書きだったテキストが縦方向に表示されます。

writing-mode の基本値

縦書きなら vertical-rl を使いましょう！

HTML＋CSSの基本構造

<div class="vertical-text">
  縦書きで表示される文章です。
</div>

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

• writing-mode：縦書きにする
• text-orientation：文字の向きを制御（特に英数字に影響）

text-orientation とは？

縦書き時に英数字や記号の向きをどう表示するかを制御します。

文字の向きにも注目！text-orientation で細かく調整

縦書きといっても、「ただ文字を縦に並べればOK」というわけではありません。
特に英数字や記号などの表示方向は、見た目や読みやすさに大きく影響します。

そこで使うのが、text-orientation プロパティです。

3つの主な指定値

実際の使い分けは？

• 自然に見せたい → mixed が最適
  和文は縦のまま、英数字はそのまま横で表示されて読みやすい
• 英数字を“和文のように”縦にしたい → upright
  書籍風・ルビ付きの表現などに便利
• 特殊な見せ方をしたい → sideways
  装飾的なタイトルや一風変わったデザインに使われることも

実際のコード例

.vertical-text {
  writing-mode: vertical-rl;
  text-orientation: mixed; /* ← ここで表示方向を調整！ */
}

縦書きレイアウトでは、文字の並びだけでなく「向き」も意識してあげることで、ぐっと自然で読みやすい見た目になります。
とくに英数字や記号が多く登場する場面では、text-orientation の設定を少し変えてみるだけで印象が大きく変わるので、いろいろ試してみてください。

英数字の向きに注意！縦中横を自然に見せるには？

縦書きにしたとき、英数字の向きが気になったことはありませんか？
たとえば、日付や年号（「2025年」など）がそのまま縦に並ぶと、読みづらく感じることがあります。

これを自然な見た目にするために使うのが、**縦中横**という表現方法です。

縦中横とは？

縦書きの中で、数字や英字だけ横向きで並べる表現のことです。
以下が完成イメージです。

See the Pen
CSSで縦書き: 英数字の向き（縦中横） by webmoyou (@yydliugt-the-animator)
on CodePen.

CSSで指定するには？

縦中横は、次の指定で英数字を横向きに表示させることができます。

<p class="vertical-text"><span class="combine-text">123</span>が横向きで表示される</p>

.vertical-text {
  writing-mode: vertical-rl;
  text-orientation: mixed;
}
.combine-text {
  -webkit-text-combine: horizontal;
  -ms-text-combine-horizontal: all;
  text-combine-upright: all;
}

レイアウトの注意点

• 行間（line-height）や余白（padding）も縦方向に働く
• 画像やボックスの横幅が縦組み内では高さになる（注意！）
• overflow: scroll も縦スクロールではなく横スクロールになる

ブラウザ対応状況

主要ブラウザ（Chrome, Edge, Firefox, Safari）は最新バージョンでほぼ対応済みです。
※ただし古いIEなどでは表示崩れの可能性があるので注意！

まとめ

CSSの writing-mode を使えば、日本語はもちろん、英数字を含むテキストも縦書きでレイアウトすることが可能です。
vertical-rl を基本に、text-orientation や余白・スクロール方向の調整を加えることで、印刷物のような縦組みデザインがWeb上でも表現できます。

普段の横書きレイアウトにちょっと変化を加えたいときや、和風・書籍風のテイストを取り入れたいときにぴったりのテクニックなので、ぜひ一度試してみてください。