読了目安時間は約 3 分です。
WEBの表示は横書きが基本です。が、和風のサイトならワンポイントで縦書きにしてみたいですよね。
今ではCSSで縦書きにすることも可能です。早速やってみましょう。
目次
縦書きにする方法
CSSのwriting-modeを使います。
縦書きは
writing-mode: vertical-rl;
縦書きで左から右へ流す場合は
writing-mode: vertical-lr;
と記述します。
「writing-mode」一覧
| vertical-rl | 縦書き（右から左へ改行） |
| vertical-lr | 縦書き（左から右へ改行） |
| horizontal-tb | 横書き（上から下へ改行） |
rlで右から左、lrで左から右、と覚えるといいと思います。
horizontal-tbは通常の横書きですね。
日本語だけならこれだけでも良いのですが、英数字が混ざっている場合は…調整が必要になります。
テキストの向きを変える
text-orientationでテキストの向きを変えます。
デフォルトは
text-orientation: mixed;
で、和文は縦、英数字は90°回転して縦になります。
「text-orientation」一覧
| mixed | 和文は縦、英数字は90°回転して縦並び |
| upright | 和文も英数字も縦並び |
| sideways | 和文も英数字も90°回転して縦並び |
縦中横はできるの？
DTPではおなじみの「縦中横」。縦書きの中で、2文字程度の英数字を横並びにする方法です。
これは縦中横にしたい箇所を<span>などで囲み、
text-combine-upright: all;
と記述して適用します。
字下げができる？
日本語の段落は、はじめの一文字を空けます。これを表現するには
text-indent: 1em;
で、一文字分インデントします。
