【CSS縦書き完全ガイド】writing-modeとtext-orientationの使い方・レイアウト応用
aikanri-adminCSSのwriting-modeとtext-orientationを使ったテキスト縦書き実装を完全解説。vertical-rl・vertical-lr・uprightの違い、縦書きレイアウト設計、Claude Codeによる自動生成まで実践的に紹介します。
Webサイトのデザインで「縦書きテキスト」を使いたい場面があります。和風デザイン、雑誌風レイアウト、サイドバーの見出しなど、横書きでは出せない雰囲気を演出できるのが縦書きCSSの強みです。しかしCSSの縦書きプロパティは種類が多く、writing-mode・text-orientation・positionの組み合わせを理解しないと思い通りにレイアウトできません。この記事では、縦書きCSSの仕組みを基礎から解説し、実務で使えるパターンをClaude Codeの活用法と合わせて紹介します。
CSSで縦書きを実現する「writing-mode」プロパティの基本
CSSで縦書きを実装するときの主役がwriting-modeプロパティです。このプロパティはテキストの「書字方向（文字を書き進める方向）」を指定し、横書き・縦書きの切り替えを1行のCSSで実現できます。
📚 用語解説
writing-mode（ライティングモード）：CSSプロパティの一つで、テキストを書き進める方向（横書き・縦書き）を指定します。日本語や中国語などの縦書きに対応した言語では特に重要なプロパティで、ブロックレベルの要素全体の書字方向を制御します。
writing-modeには主に3つの値があります。それぞれの違いを理解することが縦書きCSSの第一歩です。
| 値 | 書字方向 | 特徴・用途 |
|---|---|---|
| horizontal-tb | 横書き（左→右、上→下） | デフォルト値。通常のWeb横書きレイアウト |
| vertical-rl | 縦書き（上→下、右→左） | 日本語の伝統的な縦書き。右端から左へ列が並ぶ |
| vertical-lr | 縦書き（上→下、左→右） | 縦書きだが列が左から右へ並ぶ。モンゴル文字等で使用 |
💡 vertical-rlが日本語縦書きの標準
日本語の伝統的な縦書きは右から左に列が並びます。小説・雑誌・和風デザインではvertical-rlを使うのが基本です。vertical-lrは日本語縦書きでは一般的ではないため、特別な理由がなければvertical-rlを選択してください。
「text-orientation」で縦書き時の文字の向きを細かく制御する
縦書きにしたとき、英数字や記号の向きをどう表示するかを制御するのがtext-orientationプロパティです。日本語と英語が混在するテキストを縦書きにすると、英数字の向きが問題になることがあります。
📚 用語解説
text-orientation（テキストオリエンテーション）：writing-modeで縦書きを指定した際に、各文字の向き（縦に立てるか・横のまま表示するか）を制御するCSSプロパティ。日本語縦書き時の英数字の扱いを決める重要なプロパティです。初期値は「mixed」で、日本語は縦向き・英数字は横向きになります。
| 値 | 日本語 | 英数字 | 使いどころ |
|---|---|---|---|
| mixed | 縦向き | 横向き（回転） | 日本語長文・デフォルト |
| upright | 縦向き | 縦向き（1文字ずつ立つ） | 和風見出し・短い英単語 |
| sideways | 横向き（回転） | 横向き（回転） | 全体を90度回転する効果 |
💡 uprightは短い見出しに最適
英単語を含む縦書き見出しでuprightを使うと、英字も1文字ずつ縦に並んで和風の雰囲気が出ます。一方、長い英単語をuprightで表示すると非常に読みにくくなるため、本文には適しません。使い分けのポイントは「短い装飾的な見出し→upright、長い本文→mixed（デフォルト）」です。
縦書きレイアウトの実践設計：position・height・flexboxを組み合わせる
writing-modeで縦書きにするだけではレイアウトが崩れることがあります。縦書きにすると要素のwidth・heightの概念が入れ替わるため、位置調整・サイズ指定・複数列の配置には追加のCSSが必要です。
📚 用語解説
writing-modeとwidth/heightの関係：writing-modeを縦書きにすると、要素のwidthが「高さ方向」、heightが「幅方向」として機能します。横書きの感覚でwidth: 200pxを指定しても縦書き時には縦の長さを制御することになります。この概念の切り替えが縦書きレイアウト設計で最も混乱しやすいポイントです。
⚠️ widthとheightが入れ替わることに注意
縦書き（writing-mode: vertical-rl）では、widthは縦方向のサイズ、heightは横方向のサイズを制御します。横書きの感覚でサイズを指定するとレイアウトが崩れるため、縦書き要素のサイズ指定は実際にブラウザで確認しながら調整してください。
縦書きCSSの実践活用パターン集：和風デザイン・サイドバー・見出し
縦書きCSSを実際のWebデザインで活用するパターンを紹介します。用途ごとにコピーして使えるコードセットです。
パターン1：和風デザインの縦書き見出し
パターン2：サイドバーの縦書きラベル
パターン3：縦書き箇条書き
テキストの一部だけ縦書きにする：spanタグとインライン指定
文章全体ではなく、特定の文字や単語だけを縦書き（または特殊な向き）にしたいことがあります。そういった場合はspanタグでスコープを絞ってwriting-modeを適用します。
📚 用語解説
インライン要素とwriting-mode：writing-modeはブロック要素・インライン要素どちらにも適用できますが、インライン要素（spanなど）に適用した場合、周囲のテキストフローに影響を与えることがあります。部分的な縦書きはレイアウトが複雑になりやすいため、専用のコンテナdivで包むことが推奨されます。
💡 縦中横（たてなかよこ）で数字を読みやすく
縦書きテキスト内に「2024年」「第3章」などの数字が含まれる場合、text-combine-upright: allを使うと数字だけを横向きにできます（縦中横）。これにより読みやすさが大幅に向上します。ただしブラウザによって対応状況が異なるため、必ず表示確認してください。
縦書きCSSのブラウザ互換性と注意点
writing-modeとtext-orientationは現代のブラウザで概ね対応していますが、一部プロパティの挙動に差があります。本番実装前にクロスブラウザ確認が必須です。
| プロパティ | Chrome | Firefox | Safari | Edge |
|---|---|---|---|---|
| writing-mode | ✓ 対応 | ✓ 対応 | ✓ 対応 | ✓ 対応 |
| text-orientation | ✓ 対応 | ✓ 対応 | △ 一部差異 | ✓ 対応 |
| text-combine-upright | ✓ 対応 | △ 一部差異 | △ 一部差異 | ✓ 対応 |
📚 用語解説
ベンダープレフィックス：ブラウザ独自の実験的機能を有効化するためにプロパティ名の前に付ける接頭辞。-webkit-（Chrome/Safari系）、-moz-（Firefox系）などがあります。writing-modeの初期実装では-webkit-writing-modeが必要でしたが、現在の主要ブラウザでは標準プロパティのみで動作します。
- ✅ Chrome最新版・Firefox最新版・Safari最新版・Edgeの4ブラウザで必ず動作確認する
- ✅ スマートフォン（iOS Safari・Android Chrome）でも縦書き表示を確認する
- ✅ text-combine-uprightを使う場合はFirefox・Safariでの表示差異に注意する
- ✅ 縦書きレイアウトの崩れはwidthとheightの入れ替わりが原因のことが多い
- ✅ 縦書きフォントを使う場合はWebフォントのグリフ（文字形）が縦書き対応しているか確認する
Claude Codeで縦書きCSSを自動生成する：実践的な指示の出し方
縦書きCSSの実装はプロパティ間の組み合わせが複雑で、一から書くと時間がかかります。Claude Codeを使えば、日本語で要件を伝えるだけで完全な縦書きCSSコードを即座に生成できます。
💡 「どう見せたいか」を日本語で伝えるだけでOK
writing-modeの値を知らなくても「縦書き」「右から左」「英字も縦に立てる」と日本語で伝えれば、Claude Codeが適切なCSSプロパティを選択して生成します。生成されたコードをブラウザで確認し、「もう少し文字間隔を広く」「スマホでは横書きにして」と追加指示するだけで微調整も対応できます。
縦書きCSSはプロパティの仕組みを理解すれば決して難しくありませんが、ブラウザ間の差異確認や複雑なレイアウト設計には時間がかかります。Claude Codeを活用することで、試行錯誤の時間を大幅に短縮しながら高品質な縦書きデザインを実現できます。writing-mode・text-orientation・flexboxの組み合わせをマスターして、Webデザインの幅を広げてください。
よくある質問
Q. CSSで縦書きにするには何を使えばいいですか？
A. CSSのwriting-modeプロパティを使います。「writing-mode: vertical-rl」で日本語の伝統的な縦書き（右から左に列が並ぶ）を実現できます。英数字の向きはtext-orientationで制御します。
Q. writing-mode: vertical-rlとvertical-lrの違いは何ですか？
A. どちらも縦書きですが、複数行になったときの列の並び方が違います。vertical-rlは右から左（日本語の伝統的な形式）、vertical-lrは左から右に列が並びます。日本語縦書きにはvertical-rlが標準的です。
Q. 縦書き時に英数字も縦に立てたいときはどうすればいいですか？
A. text-orientationプロパティにuprightを指定します。「text-orientation: upright」で英字・数字も一文字ずつ縦に立ちます。ただし長い英単語はuprightにすると読みにくいため、短い装飾的な見出しでの使用が適しています。
Q. 縦書きCSSのブラウザ対応状況はどうですか？
A. writing-modeはChrome・Firefox・Safari・Edgeいずれも対応しています。text-orientationはSafariで一部挙動に差異があります。text-combine-upright（縦中横）はFirefox・Safariで差異がある場合があるため、実装後の動作確認が必須です。
Q. 縦書きにするとレイアウトが崩れるのはなぜですか？
A. 縦書き（writing-mode: vertical-rl）にすると要素のwidthとheightの概念が入れ替わります。横書き時の感覚でwidth・heightを指定するとサイズが意図と反対になることがあります。縦書き要素のサイズ調整はブラウザで実際に確認しながら行ってください。
writing-modeを使った縦書き実装でよくあるトラブルと解決策
縦書きCSSを実装したときによく発生するトラブルとその解決策をまとめます。実際にコーディングする際の参考にしてください。
トラブル1：縦書きにしたら要素の高さが変わった
writing-modeをvertical-rlに変更すると、widthとheightの役割が入れ替わります。元々「width: 200px; height: auto;」と設定していた要素は、縦書きにすると縦方向に200pxの制限がかかります。解決するには縦書き専用のサイズ指定に書き直す必要があります。具体的には縦書き時にwidthが「縦のスペース」を制御し、heightが「横のスペース（列幅）」を制御することを意識してサイズを設定します。
トラブル2：英数字が横向きになって読みにくい
writing-mode: vertical-rlのデフォルト状態（text-orientation: mixed）では、英数字は横向きのまま90度回転して表示されます。短い英単語や数字は縦書き文中で横向きになることで非常に読みにくくなります。解決策は2つあります。一つはtext-orientation: uprightで英数字を縦に立てる方法、もう一つはtext-combine-upright: allで数字を「縦中横」として横向きのまま自然に見せる方法です。どちらを使うかはデザインの目的によって判断してください。
トラブル3：スマートフォンで縦書きレイアウトが崩れる
PCでは正しく表示される縦書きレイアウトが、スマートフォンの小さな画面では崩れることがあります。縦書きは横幅が小さい端末では特にレイアウト調整が難しくなります。一般的な対処法はメディアクエリを使ってスマートフォンサイズでは横書きに切り替えることです。「@media (max-width: 768px) { .vertical-text { writing-mode: horizontal-tb; } }」のようなCSSを追加するだけで、スマホでは横書きに自動切り替えできます。
トラブル4：Safariで表示が崩れる
SafariはCSSの新機能への対応が他のブラウザより遅れることがあります。writing-modeはSafariでも対応していますが、text-orientationの一部の値やtext-combine-uprightはSafariで挙動が異なる場合があります。対策として-webkit-プレフィックス付きのプロパティを併記することで対応できる場合があります。例えばtext-combine-uprightを使う場合は「-webkit-text-combine: horizontal;」も同時に記述することで、Safari系ブラウザでの表示を改善できます。
縦書きCSSを活用できるWebデザインシーン：実例で理解する
縦書きCSSは特定のデザインシーンで非常に効果を発揮します。どのような場面で活用できるのかを具体的に解説します。
活用シーン1：和風・日本文化系サイトのメインビジュアル
旅館、和食レストラン、着物・和装ショップ、伝統工芸品販売サイトなど日本文化を前面に出すWebサイトでは、縦書きのキャッチコピーがデザインの雰囲気を大きく高めます。writing-mode: vertical-rlとtext-orientation: uprightを組み合わせ、朱色のアクセントラインや墨色のテキストと組み合わせることで、和の美しさを表現できます。横書きのサイトが溢れる中で、縦書きを使うだけで視覚的な差別化が図れます。
活用シーン2：雑誌・出版・文芸サイトのコンテンツ表現
書評サイト、文学作品の紹介ページ、出版社のWebサイトでは、縦書きが本来の日本語の書字方向として自然に感じられます。特に小説や詩の一節を引用する際には縦書きにすることで「本の中のような雰囲気」を演出できます。長い文章を縦書きにする場合はoverflow: auto（またはscroll）を設定して横スクロールで読めるようにするのが実用的です。
活用シーン3：セクション区切り・サイドバーラベル
記事ページや商品ページのセクション区切りに縦書きラベルを使うと、ページ全体にアクセントが生まれます。「CHAPTER.01」「SECTION A」などの英数字と日本語の混合ラベルをupright指定で縦に立てると、デザイン誌のようなレイアウトが実現できます。left: 0に固定したpositionで左端に縦書きラベルを配置し、コンテンツはpadding-leftでずらすという手法が多用されます。
活用シーン4：製品・サービスの特徴を縦書き箇条書きで表示
製品紹介ページで複数の特徴を横並びに縦書きで表示すると、通常のリストと異なる新鮮な見た目になります。flexbox（flex-direction: row-reverse）で複数の縦書きリストアイテムを右から左に並べることで、伝統的な縦書き文書のような体裁が作れます。特に比較表や特徴一覧のセクションで使うと効果的です。
縦書きとレスポンシブデザインの両立：スマホ対応の設計指針
縦書きデザインをレスポンシブ対応させるには、デスクトップとスマートフォンで表示を切り替える設計が必要です。メディアクエリを使ってブレークポイントごとにwriting-modeを切り替えるのが基本的なアプローチです。
デスクトップ（768px以上）では縦書き（writing-mode: vertical-rl）を使い、スマートフォン（767px以下）では横書き（writing-mode: horizontal-tb）に切り替えます。このとき縦書き用に設定したheight・widthも、横書きに戻した際に適切な値に変更する必要があります。縦書きでheight: 400pxと設定していた要素は、横書き時にはwidth: 100%・height: autoに変更するのが一般的です。
また縦書きにするとフォントサイズの体感が変わることがあります。縦書きでは文字の「高さ」方向に文字が並ぶため、font-sizeの見え方が横書き時と異なって感じられる場合があります。デスクトップ縦書き時と横書き切り替え時でfont-sizeを調整することで、視覚的に統一感のある表示が得られます。Claude Codeにレスポンシブ対応の縦書きCSSを生成させるときは「デスクトップでは縦書き、スマホでは横書きに切り替える」と明示すれば、メディアクエリも含めた完全なコードを生成してくれます。
縦書きとアニメーションの組み合わせ：CSSトランジションで動きをつける
縦書きCSSはアニメーションやトランジションと組み合わせることでさらに印象的な表現が可能です。スクロールによる縦書きテキストの出現アニメーションや、ホバー時に縦書きから横書きに切り替わるインタラクションなど、静的なCSSでは表現できないダイナミックな効果を加えられます。
縦書きテキストに最もよく使われるアニメーションは「フェードイン」と「スライドイン」です。Intersection Observer APIとCSSトランジションを組み合わせ、ユーザーがスクロールして縦書きテキストが画面に入ったタイミングでopacityを0から1に変化させるだけで、印象的な出現演出が実現できます。縦書きテキストは横書きと比べて「待たせる」感覚があるため、アニメーションとの相性が良く、ブランドのこだわりを表現するツールとして機能します。
ホバーアニメーションとしては、縦書きの見出しにホバーしたときにbackground-colorが変化したり、borderの色が変わったりする効果がよく使われます。transformプロパティのscaleやtranslateは縦書き要素にも適用できますが、widthとheightが入れ替わっているため、translateX・translateYの方向が直感と逆になる場合があります。実装時は必ず動作確認しながら調整してください。
縦書きCSS実装の総まとめ：プロパティ選択フローチャート
縦書きCSSの実装で迷ったときは、次の手順で考えると整理できます。まず「何を縦書きにするのか」を明確にします。見出しなのか、本文なのか、サイドバーラベルなのかによって最適な設定が変わります。
見出しや短い装飾テキストの場合はwriting-mode: vertical-rlとtext-orientation: uprightを組み合わせ、英数字も含めて縦に立てるのが美しいデザインになります。長い本文を縦書きにする場合はtext-orientation: mixed（デフォルト）のままにして英数字は横向きのままにし、overflow-xをスクロール可能にして読みやすさを確保します。サイドバーラベルや短いタグには縦書きにtransform: rotate(180deg)を組み合わせると、下から上に読む方向にできます。
レスポンシブ対応はすべての縦書き実装で必要です。スマートフォンでは縦書きレイアウトが崩れやすいため、768px以下のメディアクエリでwriting-mode: horizontal-tbに切り替えることを実装の初期段階から計画に組み込んでください。縦書きCSSは「和風・高品質感・差別化」を演出できる強力なツールです。適切に使いこなすことでWebサイトの表現力を大幅に高められます。Claude Codeを活用して効率よく縦書きCSSを実装し、独自性の高いWebデザインを実現してください。
縦書きCSSを初めて実装するときは、まずシンプルな「writing-mode: vertical-rl」だけで基本を理解し、そこから徐々にtext-orientation・flexboxレイアウト・メディアクエリ対応を追加していく段階的なアプローチが効果的です。一度に全てのプロパティを組み合わせようとすると複雑になりやすく、どの設定が原因で表示が崩れているのかわからなくなります。シンプルな状態から一つずつ確認しながら積み上げていくことで、縦書きCSSの挙動をしっかり理解できます。
CSSの縦書き実装において見落とされがちなのが「line-heightとletter-spacing」の調整です。横書き時と同じ値を縦書きに適用すると、行間・文字間隔の見え方が変わります。縦書き時のline-heightは「列と列の間隔」を制御し、letter-spacingは「文字と文字の縦方向の間隔」を制御します。横書きと同じ感覚でこれらを設定すると詰まりすぎたり広すぎたりすることがあるため、縦書き用の専用値で調整することをおすすめします。一般的に縦書きではletter-spacing: 0.1em〜0.2em程度を設定すると、読みやすく美しい文字間隔になります。
CSSの縦書きは「実装が難しい技術」というイメージを持たれることがありますが、writing-modeとtext-orientationの基本を押さえれば、それほど難しい技術ではありません。Claude Codeを使えば「縦書きの見出しを実装したい」と日本語で伝えるだけで完全なCSSコードを生成できるため、プロパティを一から覚える必要もなくなります。縦書きCSSをマスターして、Webデザインの表現の幅を広げてください。
writing-mode: vertical-rlとtext-orientation、そしてflexboxを組み合わせたCSSの縦書き実装は、一度マスターすればWebデザインの差別化において強力な武器になります。横書きが当たり前のWebの世界で縦書きを適切に使いこなすことは、ブランドの個性を際立たせ、ユーザーに強い印象を与えます。本記事で紹介したパターンを参考に、まずシンプルな縦書き見出しから実装を始めてみてください。Claude Codeに具体的な要件を伝えることで、複雑な縦書きレイアウトも短時間で実装できます。縦書きCSSを積極的に活用して、独自性の高いWebデザインを実現してください。
Claude Codeで業務自動化を90日で叩き込む
経営者向けの伴走型パーソナルトレーニング
Claude Code を業務に落とし込む
専門研修コース一覧
受講者本人の業務を題材に、「使いこなせる」状態になるまで伴走する研修プログラム。1対1特化型・ハンズオン・法人講座の3コースを展開中。業務特化・実装まで踏み込むタイプのClaude Code研修です。
研修コース一覧を見る →AI鬼管理へのお問い合わせ
この記事を読んで気になった方へ。
AI鬼管理の専門スタッフが、御社に最適な
業務自動化プランを無料でご提案します。
- AI業務自動化サービス「AI鬼管理」を運営 — Claude Code を活用し、経営者の業務を「AIエージェントに任せる仕組み」へ転換するパーソナルトレーニングを 伴走構築 で提供。日報・採用・問い合わせ対応・経費精算・議事録・データ集計・営業リスト等の定型業務を、AIに代行させる体制を経営者と一緒に作り込む
- Claude Code 実装ノウハウを 経営者・法人クライアント に直接指導。生成AIを「便利ツール」ではなく 「業務を任せる存在」 として運用する手法を体系化
- 「やらせ切る管理」メソッドの開発者。シンゲキ株式会社（2021年設立・鬼管理専門塾運営）にて累計3,000名以上の学習者を志望校合格に導いた管理メソッドを、AI × 経営者支援 に転用
- 著書『3カ月で志望大学に合格できる鬼管理』(幻冬舎)、『親の過干渉こそ、最強の大学受験対策である。』(講談社)
- メディア出演: REAL VALUE / カンニング竹山のイチバン研究所 / ええじゃないかBiz 他
- 明治大学政治経済学部卒
