フリーランス・個人事業主として独立を目指すデザイナー、副業を始めたいデザイナーを応援します! 自立支援に役立つ初心者向けWordPress情報も随時アップします!

CSSで文字を縦書きにする方法「writing-mode」「text-orientation」

読了目安時間は約 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;

で、一文字分インデントします。

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
目次
閉じる