CSSで縦書き表記にする方法を完全マスター！【簡単】

おはようございます！社員Aです👩

今回は、CSSで縦書き表記にする方法を完全マスターしていきたいと思います。

CSSで縦書きを表現することは普段あまりないのですが、デザイン性の高いサイトや和風サイトでは取り入れることがあります。

その際にやり方をいろいろと調べたりするのですが、今回はCSSで縦書きを完全マスターしたいと思います。

CSSで文字を縦書きにするテクニック

まずは基本の縦書きテクニックについて見ていきましょう。

CSSで文字を縦書きにするには、「writing-mode」プロパティを使います。

表示

あいうえおaiueoあいうえお

ソース

p {
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
}

文字の向きを揃えたまま縦書きにする

上記の「writing-mode」プロパティで簡単に縦書きにできましたが、英字は横向きのままになってしまいます。

この英字の向きを揃えるには、「text-orientation」プロパティを追記します。

表示

あいうえおaiueoあいうえお

ソース

p {
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
  text-orientation: upright;
}

英数字や記号を縦中央にしたまま縦書きにする

さらに、「text-combine-upright」プロパティを使うことで、英数字や記号を縦中央にしたまま縦書きにすることができます。

HTMLで記述する際に、先程まではPタグで囲むだけでしたが、縦中央にしたい英数字や記号をspanで囲います。

表示

10年間売上01位

ソース

HTML

<p><span>10</span>年間売上<span>01</span>位</p>

CSS

p {
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
  text-orientation: upright;
}
p span{
  -webkit-text-combine: horizontal;
  -ms-text-combine-horizontal: all;
  text-combine-upright: all;
}

まとめ

縦書きをCSSで実装する頻度は少ないのですが、自分の備忘録も含めてまとめてみました！

英数字や記号も縦中央にしたまま実装できるので、便利ですね。

画像で実装するよりも、SEO面やカスタマイズ性も高くなるので、これから活用していきたいと思います。