[CSS] CSSで縦書きにする方法

どうも、べ〜やんです。

今回は、CSSで簡単にテキストを縦書きにする方法を紹介します。

和風のデザインやサイドにメニューバーを配置する時などに便利です。

縦書きデザイン

和風テイストのデザインやサイドにメニューバーを配置する時などにテキストを縦にしたい時に便利な方法を紹介します。

日本語だけではなく英語表記などでも縦書きを使用すると、一段と違ったデザインが作れます。

使い方

日本語の縦書き

縦書きにしたい要素に、writing-mode: vertical-rl;を指定すれば縦書きになります。

verticalは垂直を意味して-rlとは(Right to Left)の略です。テキストが複数行になる時は右から左の文章になります。-lrとすれば逆になります。

IEの対応には、少し記述が変わります。

IE用は-ms-writing-mode: tb-rl;とします。

See the Pen bGGjJYK by beeyan (@orientado) on CodePen.

縦書きになりましたが、アルファベットの向きだけが横向きですね。

アルファベットを縦書き

アルファベットの向きも変えたい場合は、text-orientation: upright;を追加するだけです。

See the Pen mddjgXB by beeyan (@orientado) on CodePen.

横書きで縦書き

日本語を横書きのまま縦に表示したい場合は、text-orientation: sideways;を指定します。

See the Pen rNNrbvB by beeyan (@orientado) on CodePen.

数字の縦書き

数字を使ったパターンも紹介します。

数字はアルファベットと同じような扱いになります。

日付など二桁以上の数字を横並びにした縦書きをしたい場合は、

spanとtext-combine-upright: all;を使って表示できます。

.content {
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
}
.content span {
  text-combine-upright: all;
}

See the Pen jOOpRpd by beeyan (@orientado) on CodePen.

おわりに

今回は、CSSで簡単にテキストを縦書きにする方法を紹介しました。

縦書きデザインは日本語に相性がいいのですし、アルファベットをあえて縦書きにするのも面白いですね。

ぜひ使用してみてください。