【writing-mode】文字表記を縦書きにする

writing-modeプロパティでは、指定した要素の文字表記の方向を縦書きにするか横書きにするか指定することができます。

ただしwriting-modeはbody要素に直接指定することができないため、ページ全体を縦書きにする場合は、divタグで全体を囲み、そこにwriting-modeプロパティを設定する必要があります。

またテキストが長いページで縦書き表示にすると、ページの一番左側に文章の最後が表示されるため、右にスクロールする必要があります。 ですので併せてbody要素directionプロパティのrtlを設定し、右から左に文字表記させることで、右上から表示するようになるため読みやすいページとなります。

ただしこれではテキストが下揃えとなってしまうので、さらにdirectionプロパティのltrを文章(テキスト)に設定する必要があります。 半角文字は縦書きにできませんので、テキストに半角・全角文字のどちらもある場合は注意して下さい。

なおwriting-modeプロパティはInternet Explorer5.5以降でのサポートとなります。

書式

  • writing-mode : ……… 縦書き・横書きにする

★:lr-tb、tb-rl

lr-tb
文字表記が左から右となり、上から下へ改行する(横書き表示)。left to right-top to bottomという意味
tb-rl
文字表記が上から下となり、右から左へ改行する(縦書き表示)。top to bottom – right to leftという意味

使用した時の例

.sample1 {writing-mode: lr-tb;}
.sample2 {writing-mode: tb-rl;}

div {width: 50%;}
<div class="sample1">このように文字表記の方向が縦書き、または横書きとなります。スクロールが必要なほど長い文章の場合には併せてdirectionプロパティを使用しましょう。</div>
<div class="sample2">このように文字表記の方向が縦書き、または横書きとなります。スクロールが必要なほど長い文章の場合には併せてdirectionプロパティを使用しましょう。</div>

ブラウザ上の表示例

このように文字表記の方向が縦書き、または横書きとなります。スクロールが必要なほど長い文章の場合には併せてdirectionプロパティを使用しましょう。
このように文字表記の方向が縦書き、または横書きとなります。スクロールが必要なほど長い文章の場合には併せてdirectionプロパティを使用しましょう。

対応ブラウザなどのデータ

初期値 lr-tb 値の継承 継承する
適用可能な要素 すべての要素
メディア visual
対応ブラウザ Internet Explorer5.5~

関連情報