writing-mode

テキスト・フォント

テキストの書字方向を指定するプロパティです。横書き、縦書き、文字の向きを制御できます。日本語、中国語、アラビア語などの多言語対応や、デザイン上の縦書き表現に使用されます。

構文

Syntax

writing-mode: horizontal-tb | vertical-rl | vertical-lr | sideways-rl | sideways-lr

コード例

例 1

.vertical-text {
  writing-mode: vertical-rl;
  height: 200px;
  width: 100px;
}

実行結果

writing-mode: vertical-rl → 縦書き（右から左）

日本語の伝統的な縦書きです。右から左に文字が流れます。

日本語の伝統的な書字方向。小説や新聞などで使用される

縦書き（右から左）- 日本語の伝統的な書字方向

例 2

.vertical-left {
  writing-mode: vertical-lr;
  height: 200px;
  width: 100px;
}

実行結果

writing-mode: vertical-lr → 縦書き（左から右）

縦書きですが左から右に文字が流れます。モンゴル語などで使用。

モンゴル語やマンチュ語などで使用される書字方向

縦書き（左から右）- モンゴル語などで使用

例 3

.horizontal {
  writing-mode: horizontal-tb;
}

実行結果

writing-mode: horizontal-tb → 横書き（上から下）

これは通常の横書きテキストです。左から右に文字が流れ、行は上から下に進みます。これがデフォルトの書字方向です。

デフォルトの書字方向。ほとんどの言語で使用される

横書き（上から下）- デフォルトの書字方向

例 4

.sidebar-title {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  padding: 1rem;
  background: #f3f4f6;
}

実行結果

サイドバーの縦書きタイトル

サイドバー

メインコンテンツ

サイドバーに縦書きのタイトルを配置したレイアウト例です。 Webデザインでのアクセントとして効果的に使用できます。

Webデザインでのアクセント要素として縦書きを活用

サイドバーの縦書きタイトル

例 5

.book-spine {
  writing-mode: vertical-rl;
  text-orientation: sideways;
  height: 300px;
  width: 40px;
  background: #1f2937;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
}

実行結果

本の背表紙のような縦書きデザイン

CSS辞書

Web技術

デザイン

本棚の背表紙のようなデザイン効果。ナビゲーションやタブとしても活用可能

本の背表紙のような縦書きデザイン

💡 TIPS

縦書き時は要素の幅と高さの概念が入れ替わる。text-orientationと組み合わせて文字の向きも制御できる。日本語の縦書きレイアウトやデザイン上のアクセントとして活用。

⚠️ よくある間違い

縦書き時にpaddingやmarginの方向が変わることを忘れがち。flexboxやgridとの組み合わせ時は軸の方向に注意。

ブラウザサポート

Chrome 48+, Firefox 41+, Safari 5.1+

writing-mode

構文

コード例

例 1

例 2

例 3

例 4

メインコンテンツ

例 5

💡 TIPS

⚠️ よくある間違い

関連プロパティ

ブラウザサポート