CSSで縦書きにする「writing-mode」プロパティの使い方と応用

ホームページで和風の雰囲気や、雑誌のようなレイアウトを作りたいと思ったことはありませんか？

今回は、CSSの「writing-mode」プロパティを使って縦書きを実装する方法を、初心者にもわかりやすく解説します。

CSSで縦書きにする基本構文

CSSの「writing-mode」プロパティを使い次のように指定することで縦書きにすることができます。

とてもシンプルですね。

ただし、古いバージョンのブラウザでは反映されない恐れがあるため、必要に応じて次のように指定しましょう。

Can I use

writing-modeプロパティ

先述した「writing-mode」プロパティは、テキストの行のレイアウトを横書きにするか縦書きにするか指定することができるプロパティで、主に次の値があります。

• writing-mode: horizontal-tb; (初期値)
• writing-mode: vertical-rl; (右から左へ流れる縦書き。日本語に適した向き)
• writing-mode: vertical-lr; (左から右へ流れる縦書き。特定の言語や、デザイン用途向け)

基本的には「vertical-rl」を使うことになると思いますが、必要に応じて使い分けてみてください。

writing-mode – CSS: カスケーディングスタイルシート | MDN

英数字の向きを調整する「text-orientation」プロパティ

writing-modeで縦書きにすると英数字が横向きになってしまいますが、この英数字の向きを指定するのが「text-orientation」プロパティで、主に次の値があります。

• text-orientation: mixed; (初期値)
• text-orientation: upright; (英数字を縦向きに)
• text-orientation: sideways; (すべての文字を横向きに)

すべて「writing-mode」と組み合わせて使う点に注意してください。

数字のみ縦向きにする方法2選

writing-modeで縦書きにすると英数字が横向きになってしまいますが、数字のみ縦向きにする方法を2つご紹介します。

同じ方法を使えば、逆に英字のみ縦向きにしたり、英数字の一部分のみを縦向きにしたりすることもできます。

「text-orientation」プロパティを使う方法

数字の部分をspanタグなどで囲い、その部分に先述の「text-orientation: upright」を指定する方法です。

例:次のようなHTMLを作成します。

そして、次のようにCSSを指定します。

するとspanタグで挟んだ文字を縦向きにすることができます。

「text-combine-upright」プロパティを使う方法

複数の文字を一文字分の空間に挿入する「text-combine-upright」プロパティを使う方法です。

桁数が大きい場合は使いにくいですが、2～3桁くらいまでならこの方法も便利です。

例:先ほどと同じように、数字の部分をspanタグなどで囲い、次のようなHTMLを作成します。

そして、次のようにCSSを指定します。

するとspanタグで挟んだ文字が一文字分の空間に挿入され、縦向きになります。

以上、CSSで縦書きにする「writing-mode」プロパティの使い方と応用でした。

縦書きを使いこなして、お好みのホームページを制作してみてください。

実際に縦書きレイアウトを使用しているWebサイトをこちらの記事で紹介しているので、よろしければご覧ください。

縦書きレイアウトのWebサイト