Menu

CSS 文字を縦書きにする方法

2021年07月09日
2022年11月22日

CSS（スタイルシート）で文字を縦書きにする方法を紹介します。

原稿用紙の縦書きのイメージです。主には日本語（明朝体：Webフォント）でのデザインに使うことを想定しています。

文字の縦書きに使うプロパティは「writing-mode」となります。

CSSで文字を縦書きにするソースコードのご紹介

HTML

<h1 class="wm-vertical-rl">
	見出し<br>
	二行目<br>
	三行目
</h1>

h1タグにwm-vertical-rlクラスを付与します。

CSS

.wm-vertical-rl {
	-ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;
}

HTMLとCSSの結果

見出し
二行目
三行目

ソースコードの説明

writing-modeの仕様やブラウザの互換性を MDN Web Docs のWebサイト（開発者向けのウェブ技術 CSS: カスケーディングスタイルシート writing-mode）確認してみます。

「writing-mode: tb-rl」がすべて対応してそうなのですが、MacのSafari（Safari）、iPhoneやiPadのSafari（Safari on iOS）ではSafariへの対応バージョンが10.1、Safari on iOSへの対応バージョンが10.3となっています。

一方「writing-mode: vertical-rl」は、Safariへの対応バージョンが9、Safari on iOSへの対応バージョンが9となっています。

Internet Explorerは「writing-mode: vertical-rl」には対応していませんので、Internet Explorer と Microsoft Edge向けベンダープレフィックスとして「-ms-writing-mode: tb-rl」を指定しています。

このように少しの差ではありますが、Safariの下位バージョンへの対応も考慮したCSSの書き方ということがわかりました。

WebサイトのターゲットユーザーにIEを含まないと厳密にルールを決めて不要なスタイル（今回のお話の場合では「-ms-writing-mode: tb-rl」）を省くと言う考え方もあります。

たった二行のCSSのソースコードでも、対応ブラウザはどのようになっているのか、動作を検証してみたりすることで、CSSプロパティについて理解を深めることができます。

（私も今回、記事を書く事で頭の中が整理されとても勉強になりました）

以上、簡単ですが、CSSで文字を縦書きにする方法をご紹介しました。

広告