CSS 日本語のサイトに使いたい、縦書き文章の実装方法

サイト制作にあたって、日本的な文章の書き方「縦書き」を取り入れたいと思ったことはありませんか？
この記事では、ウェブページで縦書きレイアウトを実現したい場合のCSSを紹介します。

writing-mode プロパティを使う

writing-mode プロパティは、テキストの書き方向を指定するプロパティです。
このプロパティを使うことで、簡単に縦書きレイアウトを実現できます。

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

このCSSを適用してみると、下のように表示されます。
（わかりやすいようにbackground-colorとpaddingも設定しています。）

縦書き
123
abc

上記コードは、.vertical クラスの要素内のテキストを右から左に縦書きに表示します。
ただ、数字やアルファベットを見てみると、文字の向きがそろっていないことがわかります。

text-orientation プロパティを使う

text-orientation プロパティは、文字の向きを指定するプロパティです。
このプロパティを使うことで、縦書きレイアウト時に文字を横向きに表示できます。

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

このCSSを適用してみると、下のように表示されます。

縦書き
123
abc

上記コードは、.vertical クラスの要素内のテキストを右から左に縦書きに表示し、文字は横向きに表示します。
このプロパティを使うことで、数字やアルファベットの向きを日本語にそろえることができます。

縦書きレイアウトの調整

横書きの文章と同様に、行間（line-height）や文字揃え(text-aligin)、余白（marginやpaddingなど）を用いて、縦書きにした文章を読みやすくするための調整ができます。
ただし、縦書きではtext-align:left;が上揃え（下図左）、text-align:right;が下揃え（下図右）になりますから、ご注意ください。

まとめ

CSSで縦書きレイアウトを実現するには、いくつかの方法があります。
日本語のウェブサイトでは、縦書きレイアウトも重要な表現方法の一つですから、必要に応じて活用しましょう

ただし、縦書きレイアウトは、すべてのブラウザでサポートされているわけではなく、複雑なレイアウトを実現する場合、難易度が高くなります。
それぞれの方法のメリットとデメリットを理解して、目的に合った方法を選びましょう。