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

CSSで横書きのテキストを、縦書きに変更する方法の備忘録です。

縦書きのテキストは、主にwriting-modetext-orientationの2つのプロパティを設定することで実装できます。

writing-modeを設定する

writing-modeプロパティは、テキストの行のレイアウトを横書きにするか縦書きにするか、またコンテンツが左右どちらに流れていくのかを設定することが出来ます。

例えば、通常は横書きで表紙されているテキストは「vertical-rl」を設定することで、縦書きの文章に変更できます。

<p>縦書きの文章</p>
p {
  writing-mode: vertical-rl;
}

縦書きの文章

「writing-mode: vertical-rl;」を設定した<p>タグのテキストが縦書きになりました。

文章を縦書きにする

上記のようにwriting-mode: vertical-rlを設定すると、複数行の文章も縦書きで表示されます。

<p>
  山路を登りながら、こう考えた。<br>
  智に働けば角が立つ。<br>
  情に棹させば流される。<br>
  意地を通せば窮屈だ。<br>
  とかくに人の世は住みにくい。<br>
  住みにくさが高じると、安い所へ引き越したくなる。<br>
  どこへ越しても住みにくいと悟った時、詩が生れて、画が出来る。
</p>

山路を登りながら、こう考えた。
智に働けば角が立つ。
情に棹させば流される。
意地を通せば窮屈だ。
とかくに人の世は住みにくい。
住みにくさが高じると、安い所へ引き越したくなる。
どこへ越しても住みにくいと悟った時、詩が生れて、画が出来る。

writing-mode: vertical-rlを設定して複数行の文章を縦書きにした場合、テキストは右から左へ流れます。

「vertical-rl」の「rl」の部分は、「Right to Left」を省略したもので、文章を「右から左」へ行を並べることを意味しています。

テキストの流れを逆にする

テキストを左から右へ変更したい場合は、writing-mode: vertical-rlを設定します。

p {
  writing-mode: vertical-rl;
}

山路を登りながら、こう考えた。
智に働けば角が立つ。
情に棹させば流される。
意地を通せば窮屈だ。
とかくに人の世は住みにくい。
住みにくさが高じると、安い所へ引き越したくなる。
どこへ越しても住みにくいと悟った時、詩が生れて、画が出来る。

テキストが左から右へ読み進める並びになりました。

英数字を縦書きにする

writing-mode: vertical-rlの設定だけでは、英数字は横向きの縦書きになります。

<p>
  縦書きの文章<br>
  SAMPLE<br>
  0123456789
</p>

縦書きの文章
SAMPLE
0123456789

英数字も縦に並べたい場合は、text-orientationプロパティを設定します。

p {
  writing-mode: vertical-rl;
  text-orientation: upright;
}

縦書きの文章
SAMPLE
0123456789

text-orientation: uprightを指定すると、すべての文字を90度回転させて縦書きにすることが出来ます。

横向きの縦書きにする

同様にtext-orientation: sidewaysで、文章全体を横向きの縦書きにすることも可能です。

p {
  writing-mode: vertical-rl;
  text-orientation: sideways;
}

横向き縦書きの文章
SAMPLE
0123456789

文章の文字全体が横向きの縦書きになりました。

Share on Twitter
関連記事
CSS Flexboxの基本と使い方
CSS Flexboxの基本と使い方
スクロールで表示され固定されるメニューの作り方
スクロールで表示され固定されるメニューの作り方
CSSで三角形を作成する方法
CSSで三角形を作成する方法