プログラミング言語は元々英語をベースに発達したものが多く、HTMLも例外ではありません。
したがって、文章の表示も横書きが基本となっています。
しかし、日本語を使う以上は、縦書きで表現したいこともあると思います。

今回の記事では、CSSを使って文章を縦書きにする方法を紹介します。

基本：CSSで縦書きにする方法

CSSで縦書きを実現するためには、「writing-mode」プロパティを使用します。

writing-mode: vertical-rl;

この指定をした部分が縦書きになります。
以下のサンプルでは「p」要素を縦書きに指定しています。

CSS

p {
  writing-mode: vertical-rl;
}

HTML

<p>
  本日は晴天なり
</p>
<div>吾輩は猫である。名前はまだない</div>

中央揃えにしたい場合

writing-modeは、テキストの開始位置と方向を調整するために使用するCSSなので、それ以外は通常のCSSを適用可能です。
ただ、中央揃えをしたい時、横書きと同様に設定すると、ちょっと想定と異なってしまうかもしれません。
水色の背景色のボックス内に文章を書いた時のサンプルで確認してみましょう。

CSS

p {
  width: 100px;
  height: 200px;
  writing-mode: vertical-rl;
  background-color: #acf2f4;
  text-align: center;
}

HTML

<p>
  本日は晴天なり<br>
  吾輩は猫である。名前はまだない
</p>

このように「text-align: center」を指定すると「縦方向の中央」となります。
「横方向の中央」に揃えたい場合は「vertical-align: middle」を設定する必要があります。
CSSを書き換えてみましょう。

p {
  display: table-cell;
  width: 100px;
  height: 200px;
  writing-mode: vertical-rl;
  background-color: #acf2f4;
  vertical-align: middle;
}

「vertical-align」はインライン要素かテーブルセルに設定するプロパティであるため、ただ追加してもブロック要素である「p」要素には反映されません。
ブロック内で「vertical-align」を設定するためには「display: table-cell;」と指定して、ブロック内でのレイアウトをテーブルセルと同様に扱う必要があることに注意してください。

ちなみに「text-align: center」と同時に設定することは可能です。

p {
  display: table-cell;
  width: 100px;
  height: 200px;
  writing-mode: vertical-rl;
  background-color: #acf2f4;
  vertical-align: middle;
  text-align: center;
}

英数字が混ざった文章を縦書きにしたい場合

これはワープロソフトでも同様の問題が発生するのですが、縦書きにしたい文章に英数字が混ざっていると表示が英数字だけ横を向いてしまいます。
サンプルを確認してみましょう。

CSS

p {
  display: table-cell;
  width: 100px;
  height: 200px;
  writing-mode: vertical-rl;
  background-color: #acf2f4;
}

HTML

<p>CSS3の登場で、デザインに革新がおきました</p>

英数字も縦書きにしたい場合

「text-orientation」プロパティを使用することで、英数字も縦書きにすることができます。

CSSを以下のように書き換えてみましょう。

p {
  display: table-cell;
  width: 100px;
  height: 200px;
  writing-mode: vertical-rl;
  background-color: #acf2f4;
  text-orientation: upright; /* ←この行を追加 */
}

英数字も縦書きになっているのがわかります。
ほとんどの場合、この「text-orientation: upright」を指定することで綺麗に表示できるようになります。

「text-orientation」は2022年1月現在、IE（Internet Explorer）以外のブラウザの最新版であれば対応しています。
IEは2022年6月にサポートが終了し「text-orientation」に対応しているMicrosoft Edgeに置き換わるため、よほどのことがない限りは気にしないで使うことができます。

text-orientationに指定できる内容

text-orientationは、writing-modeと組み合わせて使用するCSSで、テキストの方向を指定するために使用します。

設定値	説明
mixed	text-orientattionの規定値で、以下のように設定します。 ・縦書き用の文字（ひらがなや漢字）は通常の配置 ・横書き用の文字（英数字や記号）は90°回転させて表示
upright	英数字や記号といった、横書きする文字種も全て縦に配置します。
sideways（※注）	全行を横書きで書くように配置します。 縦書きの場合、すべての文字が90°回転して配置されます。

※sidewaysは2022年1月現在Firefoxのみ対応

それぞれどのように表示されるか、確認してみましょう。

CSS

div {
  display: flex;
}
p {
  padding: 0.5em;
  width: 100px;
  height: 200px;
  writing-mode: vertical-rl;
  background-color: #acf2f4;
}

p.mixed {
  text-orientation: mixed;
}

p.upright {
  text-orientation: upright;
}

p.sideways {
  text-orientation: sideways;
}

HTML

<div>
  <p class="mixed">CSS3の登場で、デザインに革新がおきました<br>（mixed）</p>
  <p class="upright">CSS3の登場で、デザインに革新がおきました<br>（upright）</p>
  <p class="sideways">CSS3の登場で、デザインに革新がおきました<br> （sideways）</p>
</div>

それぞれの設定によって文字の見た目が変わることになるため、自身が作成したいデザインに合わせて適切な設定値を選択すると良いでしょう。

ルビを振ってみよう

縦書きで表現する場合は、多くの場合日本語を表示することになります。
台本や小説といった文章を書きたい場合、ルビを振ることもあるでしょう。
HTMLには、ルビを振る機能があるため、それを活用することで縦書きにルビを振った表現も可能です。

CSS

p {
  padding: 0.5em;
  width: 400px;
  height: 200px;
  writing-mode: vertical-rl;
  background-color: #acf2f4;
}

HTML

<div>
  <p>　吾輩は猫である。名前はまだない。
    <br>
    　どこで生れたか<ruby>頓<rt>とん</rt></ruby>と見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。<br>
    　吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番<ruby>獰悪<rt>どうあく</rt></ruby>な種族であったそうだ。この書生というのは時々我々を<ruby>捕<rt>つかま</rt></ruby>えて煮て食うという話である。

  </p>
</div>

上記サンプルのように、ルビを振っても右側に表示してくれます。
ルビの機能については、縦書きでも横書きでも、デザインや配置を気にせずテキストを書くことが可能です。

縦書きの注意点

縦書きでデザインを行う場合、ブラウザやPCは縦書きを前提として作られていないことに注意しましょう。
例えば、多くのマウスについているホイールは上下にしか回せないため、上下にしかスクロールできません。
縦書きで長文を書くと、どうしてもスクロールが必要になってくるのですが、その場合どのように配置するべきか悩むことになります。
文章は左から右に流れていくため、スクロールのたびに左方向へスクロールできれば良いのですが、ブラウザとマウスホイールを考えると、下にスクロールするしかありません。

そうなると、文章全体の配置をうまく考えてデザインする必要があります。
もちろん、JavaScriptをフル活用することで、上下のスクロールと連動して文章を横にスクロールすることも可能ですが、他の部分との整合性や操作感など、慎重に検討する必要があります。

縦書きをしたい場合「本当に縦書きする必要があるのか？」をまず考えてから適用するようにしてください。

まとめ

CSSを使って文章を縦書きにする方法を紹介しました。

縦書きはここぞという時に使うと大変効果的です。是非活用してみてください。