概要

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に変更してあげるといい感じになります。
ただ、古いバージョンのブラウザの場合動かない可能性ありです。お気をつけてください〜