Diviで文字を縦書きにする方法【超簡単】

「Diviでどうやってテキストを縦書きにするの？」

実は結構簡単にできるんです。
この記事ではそのやり方を説明します。

縦書きにするには2行のCSSが必要

-ms-writing-mode: tb-rl;
writing-mode: vertical-rl;

この二行を『詳細→メイン要素』に追加するだけで、縦書きに出来てしまうんです。
この上の-ms-writing-mode: tb-rl;はIEをサポートしてないなら要りません。

任意の場所に表示させる二つの方法

縦書きにすると、そのテキストが表示される場所が表示されて欲しい場所とズレる場合があります。
これを解決し好きな場所にテキストを表示させるには二つの方法があります。

マージンを変換する

マージンの値を変換すればテキストの位置を変えることが出来ます。
ですがネガティブマージンも必要になってくるので、これを嫌う人もいるかもしれません。

位置をabsoluteに変換する

好きな場所にHTML要素を動かすには『位置』設定をabsolute(絶対位置)に変えればいいですよね。
では実際にやってみます。

このようにおかしくなるんです。
ではどうすればいいのか？

高さを設定して解決

このように高さを設定するとこの問題が解決され、テキストが綺麗に表示されます。

是非試してみてください。

Diviのことをもっと深く知りたい方は、Diviの使い方完全ガイドをご覧ください。