CSSだけで文章を縦書きにする方法
和風のサイトなどで文章が縦書きのデザインを見るかと思います。
以前は、文章の縦書きを実現させるのは結構面倒でした。
ですが、CSS3では簡単に縦書きを実現することが出来ます。
サクッと解説してみますね。
文章を縦書きにしたい場合は、縦書きにしたい文章がある要素に以下の様な装飾をしてやります。
#vertical-writing{
width: 100%;
height: 300px;
writing-mode: vertical-rl;
-ms-writing-mode: tb-rl;
-webkit-writing-mode:vertical-rl;
}
この様に定義してやると、以下の様な縦書きが実現できます。
上記は右から左への縦書きでした。
左から右への縦書きは以下のように定義してやればOKです。
#vertical-writing{
width: 100%;
height: 300px;
writing-mode: vertical-lr;
-ms-writing-mode: tb-lr;
-webkit-writing-mode: vertical-lr;
}
上記の様に定義すると、以下のように左から右の縦書きが実装できます。
以上が文章の縦書きでした。
まとめ
CSSだけで文章を縦書きにする方法をご紹介しました。
個人的に縦書きの実装をする機会は過去にありませんでしたが、この機会に覚えておこうと思います。
和風サイトの制作依頼など来た時に使うこともあるかと思います。
簡単にできるカスタマイズなので、試してみてはいかがでしょうか?
コメントを残す