日本語の文章は、昔から縦書き文化が根づいています。近年のWebデザインでも、和風テイストや雑誌風のレイアウトを再現するためにCSS 縦書きを取り入れるケースが増えています。この記事では、CSS 縦書きを実現するための基本プロパティ・writing-modeの使い方を中心に、実際のサンプルコードや注意点、ブラウザ対応状況までを初心者向けにわかりやすく解説します。
CSSで縦書きを実現する基本を知ろう
縦書きが使われる主な場面
CSSを使った縦書きは、次のようなデザインでよく利用されます。
- 和文の新聞・雑誌風サイト
- 小説・コラム系の読み物ページ
- ポスター・広告デザイン
- 会社紹介やブランドページでの装飾見出し
特に日本語サイトでは、縦書きレイアウトを取り入れることで、伝統的で落ち着いた印象を与えられます。基本的な実装方法は、CSSで縦書きを実現する方法の記事でも詳しく紹介されています。
HTML・CSSで縦書きを表現する方法の全体像
縦書きを実現するには、HTMLだけではなく、CSSのwriting-modeプロパティを使います。HTMLの構造はそのままに、CSSで文字の流れ・書字方向を変更することで縦書きを再現できます。
通常のWebページは左から右への横書き（horizontal-tb）ですが、縦書きは上から下、右から左に文字を流すのが基本です。この流れを制御するのがwriting-modeプロパティです。
writing-modeプロパティの基本構文と使い方
writing-modeの基本構文
writing-mode: 値;HTMLで例を挙げると：
<p style="writing-mode: vertical-rl;">
これは縦書きの文章です。
</p>
主な指定値と意味
| 値 | 説明 |
|---|---|
| horizontal-tb | 横書き・左→右、上→下（標準設定） |
| vertical-rl | 縦書き・上→下、右→左（日本語に最も一般的） |
| vertical-lr | 縦書き・上→下、左→右（反転縦書きなどに使用） |
writing-modeの基本動作やtext-orientationとの組み合わせは、CSS縦書きの詳しい解説でもサンプル付きでわかりやすく説明されています。
日本語と英語が混在する場合の表示挙動
縦書き内に英数字がある場合、デフォルトでは英字が縦に1文字ずつ回転して表示されます。自然な見た目にするには、以下のように調整します。
writing-mode: vertical-rl;
text-orientation: upright; /* 文字を正立させる */
この設定により、日本語と英語が混在しても読みやすいレイアウトになります。
実際に縦書きにするCSSサンプルコード
段落全体を縦書きにする例：
<p style="writing-mode: vertical-rl;">
CSSのwriting-modeを使うと、簡単に縦書き表示ができます。
</p>
特定の要素だけ縦書きにする
<h2 class="tate">縦書きタイトル</h2>
<style>
.tate {
writing-mode: vertical-rl;
text-orientation: upright;
font-size: 24px;
border-left: 2px solid #333;
padding-left: 10px;
}
</style>
ページ全体を縦書きレイアウトにする設定
<body style="writing-mode: vertical-rl;">
<h1>縦書きWebサイトへようこそ</h1>
<p>これはページ全体を縦書きにした例です。</p>
</body>
縦書きレイアウトを作るときの注意点
画像・表・リストの扱い方
縦書きでは、画像や表の配置方向も変わります。余白設定も縦方向で考慮しましょう。
figure {
writing-mode: vertical-rl;
margin-right: 20px;
}
改行・余白・段組みの調整方法
縦書きでは、行間ではなく文字間の調整が重要です。
p {
line-height: 1.8;
letter-spacing: 0.1em;
}
複数段組みにしたい場合は、column-countを併用します。
div.column {
writing-mode: vertical-rl;
column-count: 2;
}
縦書き特有のデザイン崩れを防ぐコツ
- レスポンシブ時に横幅が広がる点に注意
- 英数字が多い場合はtext-orientation: mixed;を活用
- SafariやFirefoxでの微妙な差異を確認
より高度な応用テクニックは、writing-modeプロパティの使い方と応用でも紹介されています。
ブラウザ対応と互換性のチェックポイント
| ブラウザ | 対応状況 |
|---|---|
| Chrome | ◎ 完全対応 |
| Edge | ◎ 完全対応 |
| Firefox | ○ 一部バグあり（旧版） |
| Safari | ○ 対応済みだが差異あり |
| IE11 | △ 一部対応（tb-rl構文） |
まとめ・CSSでの縦書きはwriting-modeが基本
HTMLタグだけでは縦書きは実現できません。CSS 縦書きを実現するにはwriting-modeプロパティの指定が必須です。vertical-rlなどの方向指定とtext-orientationを組み合わせることで、日本語も英語も自然なレイアウトに整えることができます。縦書きは、和文特有の美しさをWeb上で再現できる強力なデザイン手法です。まずは小見出しやタイトルなど、部分的なCSS 縦書きから試して、Webデザインの表現力を広げていきましょう。
