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で文字を縦書きにする方法をご紹介しました。
コメント