CSS3で文字を縦書きにする

CSS Tips

目次

縦書きの特徴

Webサイトでは横書きが一般的なので、縦書きを効果的に取り入れることでアイキャッチやテキストの強調といった効果を狙えます。

縦書きにするためのCSSプロパティ

テキストを縦書きにするには以下のプロパティを使用します。

  • writing-mode
  • text-orientation
  • text-combine-upright

writing-mode

writing-modeは、縦書き、横書きの方向を指定するCSSプロパティです。
writing-modeの値には、行や列を並べる方向を指定します。
デフォルトでは横書き（horizontal-tb）でwriting-mode: vertical-rl;を指定することでテキストを縦書きにします。

text-orientation

text-orientationは、縦書きの中の文字を回転させます。
writing-modeで縦書きにしただけでは、文章中のアルファベットは横向きのまま表示されます。
text-orientationを併せて使用することで、文字も縦向きにします。

text-combine-upright

text-combineを利用すると、1文字分のスペースに複数の文字を表示できるようになります。
桁数の範囲は、2～4で、範囲外になると無視されます。デフォルト値は、2です。

その他の装飾

ルビ

テキストにルビを指定する場合はruby要素を使ってマークアップします。
ルビの位置はruby-positionで指定します。
横書きの場合、「ruby-position: over;」で上に、「ruby-position: under;」で下にルビが表示されます。縦書きの場合はoverで右側、underで左側に表示されます。

圏点

「text-emphasis-style」「text-emphasis-color」を使用してテキストを強調する圏点を表示することができます。