このデザイン、どうコーディングする？ #7｜縦書き⇔横書きをCSSだけでスマートに切り替えるには？writing-modeと論理プロパティを使いこなす

縦書き、そろそろ避けて通れなくなってきました

以前は「Webは横書き前提」が常識でしたが、最近は日本語デザインでの縦書きニーズもちらほら見かけるようになりました。
特にFigmaなどで、「スマホでは縦書きで見せたい」といった指示があると、ちょっと焦りますよね。

私も初めて縦書きを実装したときは、思ったよりもCSSだけで対応できることに驚きました。
今回はそのときの知見を元に、「writing-mode + text-orientation + logical properties を活用して、縦横の切り替えをスマートに行う方法」を紹介します。

結論：writing-mode + text-orientation + 論理プロパティでほぼ対応可能

まず結論から言えば、縦書き⇔横書きの切り替えは、CSSだけで充分可能です。

主なポイントは以下の3つ：

.writing-block {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  margin-block: 1em;
  padding-inline: 1rem;
}

• writing-mode: テキストの流れを縦に切り替える
• text-orientation: 日本語と英数字のバランスを整える
• margin-block, padding-inline: 縦でも横でも方向を意識せず余白を保てる

✅ なぜこの3点が鍵なのか？

この3つを意識するだけで、PCでは横書き、スマホでは縦書きといったレスポンシブなUIもスムーズに実現できます。

writing-modeの基本と違い

writing-mode は、テキストの書字方向（文字が並ぶ向き）と行の進行方向を制御するCSSプロパティです。
縦書きを実現するためにはこの指定が必須で、まずここを正しく理解することが第一歩になります。

✅ 主な値とその違い

💡 実務では vertical-rl 一択でOK

日本語の縦書きは、伝統的に右から左に進むため、
CSSで指定する場合は writing-mode: vertical-rl を使えばほぼ間違いありません。

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

💡 レイアウトに与える影響

writing-mode を指定すると、以下の変化が起こります：

• テキストが90度回転して縦方向に並ぶ
• inline方向が縦、block方向が横になる（CSSの意味も変わる）
• 見た目が縦書きになるため、marginやpaddingなども論理プロパティで管理するのが推奨

⚠️ スクロール方向の変化に関する注意点

writing-mode: vertical-rl を指定しても、スクロール方向が自動的に左右になるわけではありません。

基本的には、テキストが縦に並ぶだけで、スクロールは上下方向（block方向）のままです。

スクロールが横方向に発生するのは、次のような特別なケースです：

このように 改行を禁止しつつ、内容が横方向にあふれたときにのみ、スクロールバーが左右に表示されます。

※通常の縦書きレイアウトでは、スクロールは上下方向のままであると覚えておくと混乱がありません。

✅ ブラウザ対応

writing-mode: vertical-rl はすでに主要ブラウザで安定して使えるため、実務導入にも安心して使えるCSSプロパティです。

このように、writing-mode を使うだけで、日本語の縦書きをCSSで自然に再現することができます。
次は、縦書きで重要になる「英数字や記号の整列」を制御する text-orientation の使い方を解説します。

text-orientationの役割と日本語への影響

writing-mode を指定するだけでも縦書きレイアウトは成立しますが、
英数字や記号の見た目が崩れると感じたことはありませんか？

その制御に使うのが、text-orientation プロパティです。
特に日本語の縦書きで英単語や数値を扱う場合には、この指定が見た目の自然さを大きく左右します。

✅ 主な指定値とその違い

✅ 日本語縦書きのデフォルト：text-orientation: mixed

これを指定すると：

• 日本語（漢字・ひらがな・カタカナ）は縦に並ぶ
• 英数字（A〜Z、0〜9）は横向きで行中に収まる

つまり、縦書きでも英単語が自然に読めるようになるのが mixed の役割です。

✅ upright にするとどうなる？

この指定では、すべての文字（英数字含む）を縦に並べるようになります。

縦組で英語を“あえて1文字ずつ立てる”ような詩的表現や、
見出しとしての強調デザインには適していますが、本文には向きません。

✅ 実際の見た目比較

✅ 実務での選び方

⚠️ ブラウザ対応状況（2025年）

• text-orientation: mixed / upright は 主要ブラウザで安定対応
• sideways は仕様として存在するが、挙動が一部ブラウザで不安定

結論として、基本的には mixed を使っておけばOK。
それ以外の指定は、意図がある場合にのみ使うのが実務的です。

次は、縦書きと横書きの切り替えに強い設計をするために欠かせない、論理プロパティの活用について紹介します。

論理プロパティで方向を意識せずにスタイリング

縦書き対応を考えるうえで、「今までのCSS指定だと margin や padding が効かなくなった!?」という戸惑い、ありませんか？

その原因は、writing-mode を使うことで“方向の意味”が変わるからです。
この問題を解決するのが、論理プロパティ（logical properties）です。

✅ 論理プロパティとは？

従来のプロパティ：

• margin-top
• padding-left
• border-right

これらはすべて、「横書き」を前提とした物理的な方向（top, left, right…）で指定されます。

一方、論理プロパティは書字方向に応じて変化します：

✅ 実際の指定例

このように padding-inline や margin-block を使うことで、縦でも横でも“同じ意味”で解釈されるスタイルが書けるようになります。

💡 実務上のメリット

• 縦書き／横書きを切り替えてもCSSを書き直さなくて済む
• コードがシンプルになり、保守性が上がる
• 多言語対応（例えば右から左のアラビア語）にも自然と強くなる

⚠️ 注意：物理プロパティと混在させるとバグの元

たとえば以下のように指定すると、挙動が不明瞭になります：

/* NGパターン */
padding-left: 1rem;
padding-inline-start: 2rem;

これは同じ方向に対して2つの指定を行ってしまうため、どちらが優先されるかはブラウザ依存になりがちです。
論理プロパティに統一する設計方針にしたほうが安全です。

✅ 主要な論理プロパティ一覧（よく使うもの）

このように、論理プロパティをうまく使えば、縦書き・横書きの切り替えが破綻しない、柔軟なスタイル設計が可能になります。

レスポンシブ切り替えの方法（media query / prefers-writing-mode）

縦書きを導入するにあたってよくある要望が、
「PCでは横書きのまま、スマホでは縦書きにしたい」というパターンです。

この切り替えは、CSSの writing-mode をメディアクエリで制御するだけで簡単に実現できます。

✅ 基本の実装方法（メディアクエリ）

このように、横書きベースのスタイルを基本とし、モバイルだけ縦書きに差し替える構成がシンプルでおすすめです。

💡 なぜ「スマホは縦書き」が有効か？

• スクロールが縦方向のままなので、縦書きでもUXに違和感が出にくい
• 短い文章や詩的な表現を“縦で読ませたい”デザインが増えている
• 小さな画面では縦方向のリズムが視覚的に読みやすくなることも

⚠️ prefers-writing-mode のようなメディア機能は現時点で存在しない

2025年現在、prefers-color-scheme や prefers-reduced-motion のようなユーザー設定に応じた
「prefers-writing-mode」のようなメディアクエリは仕様として存在しません。

そのため、画面幅や向き（orientation）などをベースに切り替えるのが現実的な対応方法です。

✅ 表現の一例：モバイルで縦に“詩的に”並べる

スマホでは文章を縦に“たらたら”と落とすことで、読みやすさと視線誘導の演出効果が得られることもあります。

⚠️ よくある落とし穴

このように、スマホ向け縦書きはCSSだけでレスポンシブに制御可能です。
デザインの意図に応じて、「どこで切り替えるか」「どの要素だけ縦書きにするか」を明確にしておくと、設計もシンプルになります。

サンプルコード：スマホで縦書きに切り替える段落レイアウト

ここでは、ここまで紹介した内容を踏まえて、実務でそのまま使えるスマホ縦書き対応の段落レイアウトを作成してみます。

• PCでは横書きのまま
• スマホでは writing-mode: vertical-rl に切り替え
• 論理プロパティを使って余白やレイアウトを柔軟に設計

という、ミニマルで可搬性の高い実装です。

✅ ポイント解説

💡 表示イメージ（スマホ）

• 見出しも縦書きで表示され、行間が広く余白もゆとりある印象
• ユーザーのスクロールは上下のまま、違和感なく縦組を読ませることが可能
• フォントサイズや文字間の調整も自由に追加可能

このような構成なら、1つのHTML構造で横書き・縦書きの両方に対応できるため、保守性にも優れています。
また、論理プロパティを使っていれば、将来的な多言語対応やデザインの変更にも強いCSS設計が実現できます。

まとめ：縦書きは“テクニック”より“設計の考え方”が鍵

縦書きレイアウトは、一見すると“特殊な要件”に見えるかもしれませんが、
CSSの基本機能だけで自然かつ実用的に対応できる手法が整っています。

ポイントは以下の3つに集約されます：

1. writing-mode: vertical-rl で日本語の縦書きは完結
2. text-orientation: mixed を指定することで英数字も自然に整列
3. margin-block や padding-inline などの論理プロパティを使えば、縦横どちらでも崩れない設計が可能

また、レスポンシブ設計との相性も良く、メディアクエリで縦書きに切り替えるだけで柔軟に対応可能です。

今回紹介した構成をベースにすれば、以下のようなニーズにもすぐ応用できます：

• スマホだけ縦書きの詩的表現
• 日本語の書籍風デザイン
• 多言語対応を前提としたUI設計

“縦書き”という特殊な表現も、設計の原則を押さえておけば、CSSだけで無理なく自然に実装できるということが伝われば幸いです。

次回は、左右交互にブロックが並ぶタイムライン風UIの実装に挑戦します。
スマホでは縦一列、PCでは左右に振り分けるデザインの実装テクニックを、gridやpseudo-elementsを駆使して解説します。

次回もお楽しみに！