CSSでWEBサイトの文章を縦書きにする方法

WEBサイトに掲載されてる文章は、通常であれば左から右へと横書きになっている場合が多いと思いますが、CSSで文章を縦書きにする事もできます。

和の雰囲気を表現したい場合であれば、文字を縦書きにする事でより和の雰囲気が感じられるデザインになるのではないかと思います。

今回はCSSでWEBサイトの文章を縦書きにする方法をご紹介いたします！

関連記事：CSSが反映されない・適用されない原因とは？効かない時の対処法を解説！

関連記事：【コピペOK】CSSで作る見出しのデザインパターン16選をご紹介

CSSで文章を縦書きにする方法

CSSで文章を縦書きにするにはwriting-modeプロパティを使用します。

writing-modeプロパティを使う事で横並びのテキスト縦並びに変えてくれます。

文字を右から左へ改行させる場合はwriting-modeの値を「vertical-rl」へ

まずは、文字を縦も表示させてみましょう。

文章を右から左へ改行させたい場合

以下のコードを記述して文字を縦にしてみます。

.write_vertical{
  writing-mode: vertical-rl;
}

以下が実行結果になります。

無事、文字が縦に表示されました。

文字を左から右へ改行させる場合はwriting-modeの値を「vertical-rl」へ

以下のコードを記述して文字を縦にしてみます。

.write_vertical{
  writing-mode: vertical-lr;
}

以下が実行結果になります。

無事、文字が左から右へ改行し、表示されました。

文章の開始位置を右詰に変更する場合

上記では文章が縦書きになりましたが、開始位置が左詰めのままです。

この状態では読みやすさが少し損なわれますので、文章の開始位置を右詰に変更します。

以下のようにコードを変更します。

//こちらのセレクタを親要素に指定
.write_vertical{
  writing-mode: vertical-lr;
  text-align: right;
}

//こちらのセレクタを子要素に指定
.is_rtl{
  text-align: left;
}

まずは親要素に.write_verticalというクラスを付与します。

そして、.write_verticalの子要素に、.is_rtlというクラスを付与します。

以下が実行結果になります。

これで、文字が右詰で開始され、文章も右から左へ改行されました。

writing-modeプロパティの値一覧

writing-modeプロパティの値は以下の値が用意されています。

horizontal-tb	文字が左から右向きになり、上から下へ改行されます。一般的な表示と同じです。
vertical-rl	文字が上から下向きになり、右から左へ改行されます。
vertical-lr	文字が上から下向きになり、左から右へ改行されます。
sideways-rl	文字が上から下向きになり、右から左へ改行されます。文字の向きは右に90度回ります。
sideways-lr	文字が上から下向きになり、左から右へ改行されます。文字の向きは左に90度回ります。

縦書きの文章の英数字の向きを調整する方法

ここまでは、文章を右詰めで、上から下へと表示させる事ができました。

ただ、このままでは英数字の向きは右に90度向いた状態となり、以下のような表示になります。

数字の向きも縦にしたい場合は「text-orientation」プロパティを追加します。

縦書きの英数字の向き変更したい場合はtext-orientationプロパティを追加

text-orientationプロパティは、テキストの向きを調整してくれるので、縦書きの時には役に立つプロパティです。

では早速、数字の向きを調整します。

以下のコードにtext-orientationプロパティを追加します。

.write_vertical{
  writing-mode: vertical-lr;
  text-orientation: upright;
  text-align: right;
}

.is_rtl{
  text-align: left;
}

以下が実行結果になります。

これで、数字も縦に向きが調整されました。

まとめ

CSSのwriting-modeプロパティとtext-orientationプロパティを使って、WEBサイトの文章を縦書きにする方法をご紹介いたしましたが、いかがだったでしょうか。

文章は、読みやすさが大切です。その文章を読んでもらうにはまず、ユーザーの目に止まらなくてはいけません。ユーザーの目にたまるためには、ユーザーが思わず見たくなる、引き込むようなデザインでの表現も同時に大切になるのではないかと思っています。

ご興味のある方は是非一度、お試し下さい！