More than 5 years have passed since last update.

縦書きで文字を書きたい人のためのCSS

Last updated at 2020-06-06Posted at 2020-06-06

概要

CSSで文字を縦書きにしたい！

こんなHTMLがあるとします。この3つを縦書きにしたい場合を考えてみます。

html

<div class="japanText">縦書きで文字を書きたい</div>
<div class="japanText">縦書きで文字を書きたい</div>
<div class="japanText">縦書きで文字を書きたい</div>

以下のCSSを足すだけで完成です。

css

.japanText{
    writing-mode: vertical-rl;
    display: inline-block;
    font-size: 20px;
    padding: 5px;
}

writing-mode: vertical-rl;を指定することで縦書きになります。

あと、divはブロック要素なので、inline-blockに変更してあげるといい感じになります。
ただ、古いバージョンのブラウザの場合動かない可能性ありです。お気をつけてください〜