cssでテキストを縦書きにする方法

cssでテキストを縦書きにする方法をご紹介します。

「writing-mode」プロパティ

writing-mode は、テキストを横書きにするか縦書きにするかと、
行の流れる方向を設定できます。

・html

・css

 

writing-modeの値

writing-mode には以下の値があります。
()内はIE用のベンダープレフィックスの値です。

horizontal-tb（lr-tb）

横書き　行は上から下の順に表示

vertical-rl（tb-rl）

縦書き 列は右から左の順に表示

vertical-lr（tb-lr）

縦書き 列は左から右の順に表示

英数字に対応「text-orientation」

writing-mode で縦書きに設定しただけでは、文章内の英数字は横向きのまま表示されてしまいます。
text-orientation を使用することで、文字も縦向きにすることができます。
IEには対応していないので注意！

・html

・css

縦中横（たてちゅうよこ）に対応「text-combine」

text-combine プロパティを使うことで、縦書きの中の1文字分のスペースに、複数の英数字を横書きで入れる、
縦中横（たてちゅうよこ）と呼ばれるスタイルを実現できます。

・html

・css

ルビ（ふりがな）を振る「ruby」

ルビを振るには、htmlのrubyタグを使います。
ルビを振りたいテキストとルビをrubyタグで囲み、ルビは rtタグで囲みます。

・html

以上、テキストを縦書きにする方法のご紹介でした。
タイトルやコンセプト文などの一部だけ縦書きにすることで、
デザインの幅が広がりそうです。