CSS Tips | 超実務コアCSSテクニック：タイポグラフィ － writing-mode

Web APP CSS
スポンサーリンク

writing-mode は「文字の流れる方向」を変えるプロパティ

横書き・縦書き・縦中横など、日本語特有のレイアウトにも対応できる強力な CSS 機能です。
特に日本語サイトでは、縦書きの見出し・帯・サイドタイトル などでよく使われます。

writing-mode を理解すると、
「横書きの世界」から一気に「縦書きデザイン」まで表現できるようになります。

ここでは CSS と Tailwind CSS の両方で、
初心者でも迷わないように例題を交えて丁寧に解説します。

writing-mode の基本種類とイメージ

horizontal-tb（デフォルト）

横書き（左→右、上→下）
英語・日本語の通常の文章

vertical-rl

縦書き（上→下、右→左）
日本語の縦書きに最適

vertical-lr

縦書き（上→下、左→右）
中国語などで使われることがある

sideways-rl / sideways-lr

文字を90°回転して横倒しにする
縦中横や装飾的なタイトルに使える

例1：基本の縦書き（vertical-rl）

CSS 版

.vertical {
  writing-mode: vertical-rl;
}
CSS
<p class="vertical">
  縦書きの文章です。日本語は縦書きでも自然に読めます。
</p>
HTML

Tailwind 版

Tailwind には writing-mode のユーティリティがないため、任意値で指定します。

<p class="writing-mode-[vertical-rl]">
  縦書きの文章です。日本語は縦書きでも自然に読めます。
</p>
HTML

深掘りポイント
vertical-rl は「右から左へ」縦書きが進むため、
新聞・書籍の縦書きと同じ流れになります。

例2：縦書きの見出し（サイドタイトル）

CSS 版

.side-title {
  writing-mode: vertical-rl;
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: 0.1em;
}
CSS
<h2 class="side-title">特集記事</h2>
HTML

Tailwind 版

<h2 class="writing-mode-[vertical-rl] text-xl font-bold tracking-[0.1em]">
  特集記事
</h2>
HTML

深掘りポイント
縦書き見出しは「帯デザイン」「サイドバー」「雑誌風レイアウト」でよく使われます。
tracking（字間）を少し広げると美しく見えます。

例3：縦書きの帯（LP や雑誌風デザイン）

CSS 版

.ribbon {
  writing-mode: vertical-rl;
  background: #1e3a8a;
  color: white;
  padding: 1rem 0.5rem;
  font-weight: 600;
}
CSS
<div class="ribbon">期間限定</div>
HTML

Tailwind 版

<div class="writing-mode-[vertical-rl] bg-blue-800 text-white px-2 py-4 font-semibold">
  期間限定
</div>
HTML

深掘りポイント
縦書きの帯は「和風デザイン」「高級感のあるレイアウト」で特に効果的です。

例4：縦中横（数字だけ横向きにしたい）

縦書きの中で数字や英字を横向きにしたい場合、text-orientation を使います。

CSS 版

.vertical {
  writing-mode: vertical-rl;
  text-orientation: upright;
}
CSS
<p class="vertical">
  2026年のデザイン
</p>
HTML

Tailwind 版

<p class="writing-mode-[vertical-rl] text-orientation-[upright]">
  2026年のデザイン
</p>
HTML

深掘りポイント
text-orientation: upright は
「縦書きの中で数字や英字を立てて表示する」ためのプロパティです。
日本語の縦書きではほぼ必須。

例5：英字タイトルを90°回転して縦に見せる（sideways）

CSS 版

.rotate-title {
  writing-mode: sideways-rl;
  font-size: 2rem;
  font-weight: 700;
}
CSS
<h1 class="rotate-title">DESIGN</h1>
HTML

Tailwind 版

<h1 class="writing-mode-[sideways-rl] text-3xl font-bold">
  DESIGN
</h1>
HTML

深掘りポイント
sideways は「文字を回転させる」ため、
欧文タイトルを縦に見せたいときに便利です。

writing-mode とレイアウトの関係（ここが一番大事）

1. width と height の意味が変わる

縦書きにすると、

  • width → 行の長さ
  • height → 行数の高さ
    という感覚になります。

2. padding / margin の方向も変わる

縦書きでは

  • padding-top → 上方向
  • padding-right → 左方向
    など、視覚的な方向と CSS の方向がズレるため、
    実際に調整しながら慣れるのがコツです。

3. flex と組み合わせると強力

縦書きの見出しを横書きの本文と並べるときは flex が便利です。

<div class="flex gap-4">
  <h2 class="writing-mode-[vertical-rl]">特集</h2>
  <p>本文テキストがここに入ります。</p>
</div>
HTML

実務テンプレート：縦書きレイアウトの基本セット

CSS 版

.vertical-text {
  writing-mode: vertical-rl;
  text-orientation: upright;
  letter-spacing: 0.1em;
}
CSS

Tailwind 版

<div class="writing-mode-[vertical-rl] text-orientation-[upright] tracking-[0.1em]">
  縦書きテキスト
</div>
HTML

まとめ

writing-mode は
横書き・縦書きを自由に切り替えるタイポグラフィの強力な武器 です。

ポイントは次の通りです。

  • vertical-rl → 日本語の自然な縦書き
  • sideways → 英字タイトルを縦に見せる
  • text-orientation とセットで使うと美しい
  • Tailwind は writing-mode を任意値で指定
  • 縦書きは padding / margin の方向感覚が変わる

スポンサーリンク
タイトルとURLをコピーしました