CSS縦書きwriting-modeの使い方｜数字・英字の縦中横まで

CSSで文字を縦書きにするには、縦書きにしたい要素に writing-mode: vertical-rl; を指定します。 これだけで、文字が上から下へ、行が右から左へ進む日本語の縦組みになります。半角の数字や英字は横倒しになるので、2桁の数字は text-combine-upright: all;（縦中横）で1文字分の枠に横並びにし、英字を1文字ずつ立てたいときは text-orientation: upright; を使います。

この記事では、writing-mode の5つの値と text-orientation の3つの値を実際に表示して、結果を一覧表にしました。数字・日付・英単語・記号・長音・括弧といった表示パターンごとに「どのプロパティを使うか」を整理し、縦書きにしたときの余白（論理プロパティ）、Flex / Grid の軸の変化、はみ出して横スクロールになる原因、スマホでは横書きに戻す切替まで、コピペ用のコードで示します。表示と数値は Chromium 141（Playwright 1.56.0、フォントは Noto Serif CJK JP） で確認したものです。Firefox と Safari の対応状況は MDN とその元データ（browser-compat-data）の記載によります（手元では未実行）。

縦書きCSSの早見表

まず動かす：縦書きの最小コード

次の HTML を1つのファイルに保存してブラウザで開くと、縦書きの段落が表示されます。

<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>縦書きの最小例</title>
<style>
  .tategaki {
    writing-mode: vertical-rl;   /* 縦書き。行は右から左へ */
    inline-size: 20em;           /* 1行の長さ（縦書きでは高さ） */
    line-height: 1.8;
    font-family: "Noto Serif CJK JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
  }
  .tategaki p {
    margin-block: 0 1em;         /* 段落の後ろ（左側）に1字分の間隔 */
    text-indent: 1em;            /* 字下げ（上を1字空ける） */
  }
  .tcy { text-combine-upright: all; }  /* 縦中横 */
</style>
</head>
<body>
  <div class="tategaki">
    <p>令和8年<span class="tcy">10</span>月<span class="tcy">3</span>日、縦書きの練習をしました。</p>
    <p>半角の数字は縦中横で横並びにそろえます。</p>
  </div>
</body>
</html>

Chromium 141 で開くと、.tategaki は幅 147px・高さ 320px（20em）の縦書きの枠になり、段落の左側に 16px（1em）の間隔、1文字目の上に 16px の字下げが入りました。指定するのは writing-mode: vertical-rl; の1行です。あとは行の長さ（inline-size）と、数字を整える .tcy を足していけば、読みやすい縦組みになります。

writing-modeの5つの値と表示結果

同じ文字列「日本語とABC、10月。（改行）二行目ー（括弧）」を5つの値で表示し、文字の位置を測りました。高さ 230px の枠に入れています。

vertical-* と sideways-* の違いは、日本語の文字が立つか寝るかです。vertical-rl では漢字やかなが正立し、句読点（、。）や長音（ー）、括弧も縦書き用の形に切り替わりました。sideways-rl は横書きの行をそのまま時計回りに90度回した見た目になり、漢字も寝た状態になります。sideways-lr は反時計回りに回るので、下から上へ読む形になります。

使い分けの目安は次のとおりです。

2026年時点のブラウザ対応状況

バージョン番号は MDN の元データ（mdn/browser-compat-data の writing-mode.json）、Baseline の時期は MDN の各プロパティのページの記載です。「―」は今回バージョン番号までは確認していない欄です。手元の Chromium 141 では、CSS.supports() で次の結果を確認しました。

writing-mode: horizontal-tb / vertical-rl / vertical-lr / sideways-rl / sideways-lr → すべて true
text-orientation: mixed / upright / sideways → すべて true
text-combine-upright: all → true
text-combine-upright: digits 2 → false

sideways-rl と sideways-lr は Chrome 132・Safari 18.4 からの対応です。それより前の版も対象にする場合は、vertical-rl と text-orientation: sideways の組み合わせ（上から下へ読む形）で代用できます。IE 向けの -ms-writing-mode: tb-rl は、現在の主要ブラウザを対象にするなら書かなくても動きます。

text-orientationの3つの値と表示結果

text-orientation は、縦書きの中で文字をどの向きに置くかを決めるプロパティです。writing-mode が縦書き（vertical-rl / vertical-lr）のときだけ効きます。

同じ文字列「日本語とABC、10月ー（括）」を vertical-rl の中で表示した結果です。

フォントサイズ 20px での実測です。upright では英字も漢字と同じ 20px の枠を1つずつ使うため、英字が多いと行が長くなります。sideways は日本語も含めてすべて寝かせるので、見た目は sideways-rl と同じになりました。

MDN の記載では、upright を指定すると文字の方向（direction）が ltr として扱われます。また sideways-right は sideways の別名として残されています。

.tategaki       { writing-mode: vertical-rl; }
.tategaki .up   { text-orientation: upright; }   /* 英数字を立てる */
.tategaki .side { text-orientation: sideways; }  /* 全部を寝かせる */

表示パターン別：縦中横と正立のどちらを使うか

縦書きで手を入れたくなるのは、ほとんどが半角の英数字と記号です。実際に表示して確かめた結果を、パターン別にまとめます。

全角文字は縦書き用の形に自動で切り替わり、半角文字は横倒しになる、というのが基本の動きです。手を入れるのは半角の部分だけで済みます。

2桁の数字・日付は縦中横にする

縦中横（たてちゅうよこ）は、縦書きの行の中で、数文字を横に並べて1文字分の枠に収める組み方です。text-combine-upright: all; を、横並びにしたい文字を囲んだ要素に指定します。

<p class="tategaki">
  令和8年<span class="tcy">10</span>月<span class="tcy">3</span>日
  午前<span class="tcy">9</span>時<span class="tcy">30</span>分
</p>

.tategaki { writing-mode: vertical-rl; }
.tcy      { text-combine-upright: all; }

フォントサイズ 20px・行の高さ 1.6 で、縦中横にした要素の大きさを測った結果です（幅×高さ。幅 29px は行の太さ、高さが文字の進む方向の長さ）。

何文字入れても 20px（1文字分）に押し込まれることがわかります。2桁まではきれいに収まり、3桁はやや細く、4桁は読み取りにくい細さになりました。そこで次のように使い分けます。

1桁の数字も .tcy で囲んでおくと、横倒しにならず正立します。日付のように1桁と2桁が混ざる箇所は、すべて同じクラスで囲むと扱いがそろいます。

数字を自動で縦中横にしたいとき

仕様には、連続する数字を自動で縦中横にする text-combine-upright: digits 2; という値が定義されています。ただし MDN には「どのブラウザも未対応」と記載があり、手元の Chromium 141 でも CSS.supports('text-combine-upright', 'digits 2') は false でした。現時点では、数字を span で囲む方法が確実です。

原稿の数字を手で囲むのが大変なときは、JavaScript で1〜2桁の半角数字だけを囲めます。縦書きの要素より後ろ（body の末尾など）に置いてください。

<script>
  // .tategaki の中の 1〜2 桁の半角数字を span.tcy で囲む
  document.querySelectorAll(".tategaki").forEach((root) => {
    const walker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT);
    const nodes = [];
    while (walker.nextNode()) nodes.push(walker.currentNode);
    nodes.forEach((node) => {
      if (node.parentElement.closest(".tcy")) return;
      const parts = node.data.split(/(?<![0-9])([0-9]{1,2})(?![0-9])/);
      if (parts.length === 1) return;
      const frag = document.createDocumentFragment();
      parts.forEach((part, i) => {
        if (i % 2 === 1) {
          const span = document.createElement("span");
          span.className = "tcy";
          span.textContent = part;
          frag.append(span);
        } else if (part) {
          frag.append(part);
        }
      });
      node.replaceWith(frag);
    });
  });
</script>

「2026年10月3日、（縦中横済みの12）時5分に100個」という段落で実行した結果の HTML です。3桁以上の数字と、すでに囲んである数字はそのまま残りました。

2026年<span class="tcy">10</span>月<span class="tcy">3</span>日、<span class="tcy">12</span>時<span class="tcy">5</span>分に100個

英単語・略語は正立か横倒しかを選ぶ

<p class="tategaki">
  <span class="up">CSS</span>入門と JavaScript の基礎
</p>

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

記号・括弧・長音の扱い

実際に表示して確かめた結果です。

縦書きにする原稿は、記号と括弧を全角でそろえておくと、CSS での調整がほとんど要らなくなります。なお、text-orientation: sideways を指定した範囲では、長音も横書きの形のまま回転しました。日本語を含む範囲には sideways を広く掛けず、英文の部分だけに絞るのがよい使い方です。

縦書きの余白は論理プロパティで書く

縦書きにすると、「上下左右」と「文章の向き」がずれます。たとえば段落の後ろの間隔は、横書きでは下（margin-bottom）ですが、縦書きでは左になります。論理プロパティは、上下左右ではなく「行の進む方向（ブロック方向）」と「文字の進む方向（インライン方向）」で指定する書き方で、横書きでも縦書きでも同じ意味で働きます。

次の CSS を、横書きと vertical-rl の両方に当てて、計算後の値を調べました。

.box {
  margin-block-start: 10px;
  margin-block-end: 20px;
  margin-inline-start: 30px;
  margin-inline-end: 40px;
  padding-block: 1px 2px;
  padding-inline: 3px 4px;
  inline-size: 200px;
  block-size: 100px;
  border-inline-start: 5px solid red;
}

Chromium 141 での結果（getComputedStyle の値）:

覚え方は次のとおりです。

縦書きと横書きを切り替えるページでは、余白とサイズを論理プロパティで書いておくと、writing-mode を変えるだけで余白の向きも一緒に切り替わります。

Flex・Gridの軸も縦書きで変わる

display: flex や display: grid の「行」「列」も、上下左右ではなく文章の向きに合わせて決まります。300×300px のコンテナに A・B・C を入れて位置を測りました。

Grid に 1〜4 の4つを入れた場合、横書きでは「1 2／3 4」と左上から右へ並びますが、vertical-rl では 1 が右上、2 がその下、3 が 1 の左、4 が 3 の下に置かれました（1: x=250,y=0　2: x=250,y=100　3: x=200,y=0　4: x=200,y=100）。

/* 縦書きの中で、見出しと本文を「右から左」に並べたい */
.card {
  writing-mode: vertical-rl;
  display: flex;
  flex-direction: column;  /* 縦書きでは column がブロック方向＝右から左 */
  gap: 1em;
}

row は「文字の進む方向」、column は「行の進む方向」と読み替えると、縦書きでも迷いません。justify-content は主軸、align-items は交差軸という関係はそのままです。

はみ出して横スクロールになる原因と対処

縦書きで長い文章を入れると、行が左へ左へと増えていき、枠の幅を超えることがあります。幅 375px・高さ 600px の画面に、長い文章（1,600字）を入れて測りました。

ここからわかることは3つです。

1. 縦書きの要素は、高さが決まると、文章量に応じて幅が広がります。 高さを指定しない場合は画面の高さ（今回は 600px）が上限になり、そこで折り返して左へ行が増えました。
2. 横書きのページの中に縦書きの div を置くと、div は左端から配置されます。 書き出しは div の右端なので、幅が画面を超えると書き出しが画面の外に出ます（パターン A・D）。
3. width: 100% と overflow-x: auto を付けると、枠の中だけがスクロールし、書き出しが見える状態から始まります（パターン E）。このとき枠のスクロール位置は 0 から負の方向（今回は -885 まで）に動きました。

コピペ用の形にすると次のようになります。同じ 1,600字の文章で試すと、枠は幅 375px・高さ 420px（70vh）に収まり、ページの横スクロールは出ず、書き出しは左から 353px の位置（画面内）に表示されました。

/* 横書きのページの中に、縦書きの読み物エリアを置く */
.tategaki-area {
  writing-mode: vertical-rl;
  inline-size: min(30em, 70vh);  /* 1行の長さ（高さ）。画面の7割まで */
  block-size: 100%;              /* 親の幅いっぱい */
  overflow-x: auto;              /* 行が増えたら枠の中で横スクロール */
  line-height: 1.8;
}

/* 画像や表が枠を押し広げないようにする */
.tategaki-area img {
  max-block-size: 100%;   /* 縦書きでは「幅」の上限になる */
  block-size: auto;
}

画像についても測りました。高さ 300px・幅 375px の縦書きの枠に、幅 600px の画像を入れた場合です。

横書きでおなじみの max-width: 100% はそのまま使えます。論理プロパティで書くなら、縦書きでの幅はブロック方向なので max-block-size です。

スマホでは横書きに戻す切替

縦書きは画面の高さを1行の長さに使うので、縦に長いスマホ画面では行が長くなり、横スクロールも増えます。画面幅が狭いときだけ横書きに戻すのが、読みやすさと手間のバランスがよい方法です。

/* 既定：縦書き */
.article {
  writing-mode: vertical-rl;
  inline-size: min(30em, 80vh);
  line-height: 1.8;
}
.article p {
  margin-block: 0 1em;
  text-indent: 1em;
}
.article .tcy { text-combine-upright: all; }

/* 画面幅 600px 以下：横書きに戻す */
@media (max-width: 600px) {
  .article {
    writing-mode: horizontal-tb;
    inline-size: auto;
  }
  .article .tcy { text-combine-upright: none; }
}

この CSS を当てたページで、画面幅を変えて計算後の値を確認しました。

画面幅 1000px → writing-mode: vertical-rl / .tcy の text-combine-upright: all
画面幅 400px  → writing-mode: horizontal-tb / .tcy の text-combine-upright: none

余白を margin-block や text-indent といった向きに依存しない書き方にしておけば、切り替えるのは writing-mode と行の長さだけで済みます。text-combine-upright は横書きでは効かないプロパティですが、切替の意図が伝わるように none に戻しています。

逆に「スマホでは横書き、広い画面だけ縦書き」と考える場合は、@media (min-width: 601px) の中に縦書きの指定を入れる書き方もできます。

.article p { margin-block: 0 1em; text-indent: 1em; }

@media (min-width: 601px) {
  .article {
    writing-mode: vertical-rl;
    inline-size: min(30em, 80vh);
  }
  .article .tcy { text-combine-upright: all; }
}

よく使う縦書きパーツのコード

表の見出しを縦にする

<table class="schedule">
  <tr>
    <th class="v">担当</th>
    <th class="v">開始日</th>
    <th class="v">備考</th>
  </tr>
  <tr><td>佐藤</td><td>10/3</td><td>なし</td></tr>
</table>

.schedule th.v {
  writing-mode: vertical-rl;
  padding-block: 0.25em;
  padding-inline: 0.5em;
  white-space: nowrap;
}

縦書きの見出しと横書きの本文を並べる

<section class="feature">
  <h2 class="feature-title">季節のおすすめ</h2>
  <div class="feature-body">
    <p>本文は横書きのままにして、見出しだけを縦に立てるレイアウトです。</p>
  </div>
</section>

.feature {
  display: flex;
  flex-direction: row-reverse;  /* 見出しを右側に置く */
  gap: 1.5em;
}
.feature-title {
  writing-mode: vertical-rl;
  margin: 0;
  letter-spacing: 0.1em;
}

ルビと傍点

<p class="tategaki">
  <ruby>縦中横<rt>たてちゅうよこ</rt></ruby>は
  <span class="bouten">2桁まで</span>がきれいです。
</p>

.tategaki { writing-mode: vertical-rl; }
.bouten   { text-emphasis: sesame; }  /* 傍点（ゴマ点） */

Chromium 141 で確認した結果は次のとおりです。

よくある質問

Q. 縦書きにしたら数字が横に倒れました。どう直しますか？ A. 1〜2桁なら数字を span で囲んで text-combine-upright: all; を指定します。4桁の年などは text-orientation: upright; で1字ずつ立てるか、全角数字・漢数字にします。Chromium 141 では、縦中横にした文字は桁数に関係なく1文字分の枠に収まり、4桁ではかなり細くなりました。

Q. vertical-rl と sideways-rl は何が違いますか？ A. vertical-rl は日本語の文字を立てたまま縦に並べます。sideways-rl は横書きの行を丸ごと時計回りに90度回すので、漢字やかなも寝ます。日本語の縦組みには vertical-rl、英語のラベルを縦に置きたいときは sideways-rl や sideways-lr が合います。

Q. writing-mode に -webkit- や -ms- の接頭辞は必要ですか？ A. MDN の元データでは、接頭辞なしの writing-mode は Chrome 48・Firefox 41・Safari 10.1 から使えます。現在の主要ブラウザを対象にするなら、接頭辞なしの1行で足ります。

Q. 縦書きのページで横スクロールの始まりが左端になってしまいます。 A. 横書きのページの中に縦書きの要素を置くと、要素は左端から配置され、書き出し（右端）が画面の外に出ることがあります。縦書きの要素に width: 100% と overflow-x: auto を付けて、枠の中でスクロールさせると、書き出しが見える状態から始まります。

まとめ

• 縦書きは writing-mode: vertical-rl; の1行で始められる。日本語は正立し、句読点・長音・全角括弧は縦書き用の形に自動で切り替わる
• 5つの値の違いは「文字が立つか寝るか」と「行の進む向き」。日本語の本文は vertical-rl、英語ラベルは sideways-rl / sideways-lr（Chrome 132・Safari 18.4 以降）
• 1〜2桁の数字は text-combine-upright: all（縦中横）、4桁や略語は text-orientation: upright。digits の値はまだ使えない
• 記号と括弧は全角にそろえると、CSS での調整がほとんど要らない
• 余白とサイズは論理プロパティ（margin-block、padding-inline、inline-size）で書くと、縦横を切り替えても向きが合う
• Flex の row は文字の進む方向、column は行の進む方向。縦書きでは row が上から下になる
• 横スクロール対策は width: 100% と overflow-x: auto、スマホではメディアクエリで horizontal-tb に戻す

参考・出典

• MDN Web Docs: writing-mode（値の説明、Baseline の時期）
• MDN Web Docs: text-orientation（値の説明、upright と direction の関係）
• MDN Web Docs: text-combine-upright（digits の対応状況）
• mdn/browser-compat-data: css/properties/writing-mode.json（各値の対応バージョン）

株式会社RJC ― SI事業・SES事業・AI駆動開発。RJCは一緒に成長を楽しめる会社です。