CSSのwriting-modeで縦書きを実現｜和風デザインや新聞風レイアウトに活用する方法

こんにちは！静岡県浜松市でWEBデザイナーをしています小瀧です。

Webページといえば横書きが当たり前と思われがちですが、
実はCSSのwriting-modeプロパティを使うことで、縦書きレイアウトも実現できるのをご存じでしょうか？

日本語の伝統的な組版をWebに持ち込めるこのプロパティは、
新聞風のコラムや和風デザイン、ポスター的なUI演出にぴったり。

今回は、writing-modeの基本から実践的な使い方、注意点や応用デザインまで、
縦書き表現の世界をじっくり掘り下げます。

writing-modeとは？

writing-modeはテキストの書字方向（横書き/縦書き）を指定するCSSプロパティです。
横書きが基本のWebで、縦書きを実現する唯一の方法として活用されます。

基本コード例：縦書きの設定

See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.

.vertical-text { 
 writing-mode: vertical-rl; 
 text-orientation: mixed; 
 border: 1px solid #ccc; 
 padding: 1em; 
} 

HTML側ではクラスを付与するだけでOK。

text-orientationで文字向きを制御

縦書きの場合、欧文や数字が90度回転するのがデフォルト挙動です。
自然な見た目にするにはtext-orientation: mixed;を指定して英数字だけ横向きに維持するのがポイント。

See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.

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

縦書きレイアウトのデザイン事例

縦書きを1カラムだけ取り入れることで、ページ全体の雰囲気が大きく変わります。

注意点：ブラウザとレイアウト崩れ

主要ブラウザ（Chrome/Edge/Safari/Firefox）は対応済み。
フレックスボックスやグリッドと組み合わせると配置が変わるため調整が必要です。

まとめ

 

satokotadesignキャンペーン実施中！