CSS writing-modeで縦書きを実現する方法

writing-modeとは？

writing-modeは、テキストの書字方向を制御するCSSプロパティです。日本語の縦書き表示や、デザインのアクセントとして縦方向のテキストを使いたいときに活用します。

日本語は元々縦書きの言語です。新聞、小説、漫画のセリフ。どれも縦書きが自然ですよね。Webページは横書きが基本ですが、writing-modeを使えば縦書きも簡単に実現できます。

和風デザインのサイトや、ポートフォリオのアクセントに使うと効果的です。ただし、長い文章を縦書きにすると画面の横幅を使い切ってしまいます。見出しや短いテキストに使うのがおすすめです。

writing-modeの値

horizontal-tb（横書き・初期値）

通常の横書きです。テキストは左から右へ、行は上から下へ進みます。すべての要素のデフォルト値です。

英語、中国語（簡体字）、韓国語など、ほとんどの言語がこの方向です。特に指定しなければこの値が適用されるので、普段は意識する必要がありません。

vertical-rl（縦書き・右から左）

日本語の伝統的な縦書きです。テキストは上から下へ、行は右から左へ進みます。小説や俳句の表示に最適です。

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

「rl」はright to left（右から左）の略です。最初の行が右端に来て、次の行が左へ進みます。日本語の本を開いたときと同じ方向です。新聞の見出しや、和食レストランのメニューでよく見る配置です。

vertical-lr（縦書き・左から右）

テキストは上から下へ、行は左から右へ進みます。モンゴル語などで使われますが、デザイン用途でも使えます。

.sidebar-title {
  writing-mode: vertical-lr;
}

💡 CSS入門ガイドでCSSの基本を確認できます。

縦書きでよく使う関連プロパティ

text-orientation（文字の向き）

縦書き時の文字の向きを制御します。

/* 漢字・ひらがなは正立、英数字は横倒し（デフォルト） */
text-orientation: mixed;

/* すべての文字を正立させる */
text-orientation: upright;

mixedがデフォルトです。日本語の文字はそのまま正立し、英数字だけ90度回転します。uprightを指定すると、英数字も正立します。ただしuprightだと英単語が1文字ずつ縦に並ぶため、読みにくくなることがあります。英単語が多い文章ではmixedのままが無難です。

text-combine-upright（縦中横）

縦書きの中で、2桁の数字などを横並びにする「縦中横」を実現します。

/* 「12月」の「12」を横並びにする */
.tcy {
  text-combine-upright: all;
}

/* HTML: <span class="tcy">12</span>月 */

縦中横は日付や番号でよく使います。「12月25日」の「12」と「25」をそれぞれspanで囲んでtext-combine-upright: allを指定します。3桁以上の数字には使わないのが一般的です。幅が狭くなりすぎて読みにくくなるためです。

論理プロパティ（margin-block等）

縦書きでは「上下左右」の概念が変わるため、margin-block（ブロック方向）や margin-inline（インライン方向）を使うと、書字方向に依存しないスタイルが書けます。

.text {
  margin-block: 16px;  /* 書字方向のブロック方向に余白 */
  padding-inline: 8px; /* 書字方向のインライン方向に余白 */
}

従来のmargin-topやpadding-leftは物理的な方向を指定します。論理プロパティを使えば、writing-modeを変更しても余白の方向が自動的に切り替わります。多言語対応のサイトでは特に便利です。

実践例3つ

writing-modeを使った実践的なデザインパターンを3つ紹介します。どれもコピーしてすぐに使えます。

和風デザインの見出し

.japanese-heading {
  writing-mode: vertical-rl;
  font-size: 24px;
  font-weight: bold;
  letter-spacing: 0.1em;
  border-right: 3px solid #b91c1c;
  padding-right: 12px;
}

border-rightで縦線を引くと、和風の雰囲気が強まります。letter-spacingで文字間を広げると、ゆったりとした印象になります。

縦書きの俳句・短歌表示

.haiku {
  writing-mode: vertical-rl;
  font-family: "游明朝", serif;
  font-size: 20px;
  line-height: 2;
  height: 300px;
  padding: 20px;
  background: #fefce8;
  border-radius: 8px;
}

heightを指定して縦書きの表示領域を確保しています。heightがないと、テキストが横に広がり続けてしまいます。line-heightを広めに取ると、行間にゆとりが生まれて読みやすくなります。

📖 CSSフォント設定で和文フォントの指定方法を学べます。

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

.sidebar-label {
  writing-mode: vertical-lr;
  text-orientation: mixed;
  font-size: 14px;
  color: #6b7280;
  letter-spacing: 0.2em;
}

vertical-lrを使うと、テキストが左から右へ進みます。サイドバーの左端にラベルを置くとき、この方向が自然です。letter-spacingを広めに取ると、文字が詰まらず読みやすくなります。

🔗 テキスト装飾と組み合わせるとさらに表現が広がります。

注意点

• 英数字の向き：デフォルトでは英数字が横倒しになります。text-orientation: upright で正立させるか、text-combine-upright で縦中横にしましょう。
• レスポンシブ対応時の切り替え：スマホでは縦書きだと読みにくい場合があります。メディアクエリで横書きに切り替えることを検討しましょう。
• FlexboxやGridとの相互作用：writing-modeを変更すると、主軸と交差軸の方向も変わります。Flexboxで横並びにしていた要素が、縦書き要素の中では意図しない方向に並ぶことがあります。縦書きエリアの中でレイアウトを組むときは、方向を確認しながら調整しましょう。Flexboxの基本はFlexbox入門で学べます。

📖 セマンティックHTMLで文書構造を正しく保つことも大切です。

まとめ

最初のCSSで基礎を固めてから縦書きに挑戦しましょう。