More than 3 years have passed since last update.

【初心者でもわかる】CSSで縦書きを実装する

Posted at 2020-12-16

どうも7noteです。縦書き対応する方法について。

日本語には横書きだけでなく縦書きもあるのでCSSで対応していきます。

index.html

<p class="tategaki">徒然なるままにうんたら<br>かんたら</p>

style.css

.tategaki {
    -webkit-writing-mode: vertical-rl;  /* Safari用 */
    -ms-writing-mode: tb-rl;            /* IE用 */
    writing-mode: vertical-rl;
}

ベンダープレフィクス（webkitやms）を付けなければ各種ブラウザに対応できないので注意が必要です！
writing-modeには様々な指定ができるのですが、おそらく一番使われるのがvertical-rlかなと思います。
縦書きにしたのち、右から左に行が進む書き方ですね。

その他の書き方についてはMDNのサイトで確認できます！
https://developer.mozilla.org/ja/docs/Web/CSS/writing-mode

無理やりですが、こんな書き方で縦書きもできます。あまりするメリットはないですが。

index.html

<p class="tategaki">
<span>徒</span>
<span>然</span>
<span>な</span>
<span>る</span>
<span>ま</span>
<span>ま</span>
</p>

style.css

.tategaki {
  display: flex;
  flex-direction: column;
}

※ 1行のみ対応。

WEBでは縦書きのシーンはあまりないですが、CSSが用意されているあたり需要は意外とあるんじゃないかなと思います。
アジアの一部地域、特に日本では一般的に縦書きが利用されている事を思うと、日本人のためのCSSなのかなとも思えてきますね。

ちょっと親近感がわきました。