表現の幅が広がる！CSSで縦書きレイアウトを導入してみた

01CSSで縦書きレイアウトを組む

writing-mode

縦書きのレイアウトにするには、CSSのwriting-modeプロパティを使います。

HTML

<div class="vertical">
	<p>縦書きレイアウトで<br>表現の幅が広がります。</p>
</div>

CSS

.vertical {
	-ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;
}

出力結果

writing-modeの値には下記があります。

カッコ内はIE用のベンダープレフィックスの値です。

実際にスタイルを適用したものを見てみましょう。

horizontal-tb

vertical-rl

vertical-lr

ちなみに、writing-modeにはほかにもsideways-lr,sideways-rlなどがありますが、ブラウザの対応状況が2019年12月時点でいまいちなので、ここでは割愛します。

02縦書きのテキストの向きを調整する

さて、簡単に縦書きレイアウトができましたが、このままだと英単語や数字の表示がいまいちよろしくないですね。ということで、行内のテキストの向きを調整してみましょう。

text-orientation

テキストの向きを調整するのに、text-orientationプロパティを使ってみます

mixed

text-orientation: mixed;

upright

text-orientation: upright;

sideways

text-orientation: sideways;

text-orientationプロパティは、writing-modeで縦書きを指定したときに効果があります。

ただし、残念ながら2019年12月現在、EdgeやIEでの表示に対応していません。

text-combine-upright

text-combine-uprightは一文字分の空間に挿入する文字の組み合わせを設定します。

.num {
	-ms-text-combine-horizontal: all;
	-webkit-text-combine: horizontal;
	text-combine-upright: all;
	line-height: 1;
	vertical-align: baseline;
}

<p>この記事は<br><span class="num">2019</span>年<span class="num">12</span>月<span class="num">14</span>日に<br>公開しました‼</p>

text-combine-uprightは該当のテキストをそれぞれタグで囲い使用します。ベンダープレフィックスを指定することで、ほとんどのブラウザに対応できました。縦書き表現がより身近になりましたね！

なお、親要素のline-heightの値が大きい時、EdgeやIEで大幅にレイアウトが崩れたので、spanで囲った部分に個別にline-heightとvertical-alignの指定を追加しています。

03デザイン上の挙動を確認する

さて、これで縦書き表示の仕方は一通りわかりましたね！次に、実際にデザインに落とし込むときの、もろもろの挙動を確認します。

縦書きの左寄せ、右寄せ、センタリング

さて、今のままだと、テキストが画面の左に寄っていますよね。文章の開始位置を調整するにはどうすればよいでしょうか。

HTML

<div class="sample01_miss">
	<p>縦書きテキストを<br>レイアウトしてみよう！</p>
</div>

CSS

.sample01_miss {
	text-align: right;
	-ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;
	display: inline-block;
}

出力結果

あらいやだ。画面内で右寄せにするつもりが、段落内で下揃えになってしまいました。

HTML

<div class="sample01_wp">
	<div class="sample01">
		<p>縦書きテキストを<br>レイアウトしてみよう！</p>
	</div>
</div>

CSS

.sample01_wp {
	text-align: right;
}
.sample01 {
	-ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;
	text-align: left;
	display: inline-block;
}

出力結果

今度はうまくいきました！親要素にtext-align: right;を指定することで、右寄せになるのですね！

同様にして、下のようにレイアウトが可能です。

text-align: center;

text-align: left;

縦書きレイアウトのmargin、padding

さて、縦書きレイアウトのmarginとpaddingの挙動はどうなっているでしょうか。

HTML

<div class="sample01 test01">
	<p>縦書きレイアウトの<br>余白の挙動は…</p>
	<p>縦書きレイアウトの<br>余白の挙動は…</p>
</div>

CSS

.test01 {
	border: 1px solid #7EA8BE;
}
.test01 p {
	background-color: #7EA8BE;
	margin: 2em 1em;
	padding: 30px 10px;
}

出力結果

分かりやすいようにボーダーと背景カラーを設定してmarginとpaddingの挙動を見てみました。横書きレイアウトの時と変わりませんね。参考までに。

縦書きレイアウトのルビ

<p><ruby>縦<rt>たて</rt>書<rt>が</rt></ruby>きレイアウトのルビ</p>

ルビも問題なく使えるようです！

縦書きレイアウトの上付き文字・下付き文字・特殊文字

<p>東京スカイツリー&reg;</p>
<p>10m<sup>2</sup></p>
<p>CO<sub>2</sub></p>

こちらの挙動はこのような感じです。

縦書きレイアウトの箇条書きリスト

<ul>
	<li>箇条書きリスト</li>
	<li>箇条書きリストの<br>サンプル</li>
	<li>箇条書きリスト</li>
</ul>

縦書きの場合もリスト表示は問題なくできそうですね。

04縦書きで注意したいこと

さて、一通りの挙動を確認して、プロジェクトにも十分導入ができそうなのですが、実際には他にも注意点がありそうです。

IEでの表示について

実は、IEで実装する際は一点注意しないと大幅にデザイン崩れが起こります。

HTML

<div class="sample02_wp">
	<div class="sample02_miss">
		<p>IEでの縦書き表示は<br>要注意！</p>
	</div>
</div>

CSS

.sample02_wp {
	text-align: center;
}
.sample02_miss {
	text-align: left;
	-ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;
}

実装結果

あらいやだ。IEで見ると、下に余分な余白がかなり空いています。そもそも、親要素にtext-align-centerを指定しているのに、左寄せになっているし…。

これは、縦書きの要素のdisplayプロパティが原因。

HTML

<div class="sample02_wp">
	<div class="sample02">
		<p>IEでの縦書き表示は<br>要注意！</p>
	</div>
</div>

CSS

.preview .sample02_wp {
	text-align: center;
}
.preview .sample02 {
	text-align: left;
	-ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;
	display: inline-block;
}

実装結果

このように、縦書きの要素にdisplay: inline-block;を指定してあげれば、IEで余計な余白が空かないし、ちゃんとセンタリングされますね！

長い文章の表示

さて、今までは本の数行の短いテキストを縦書きにしていました。これを長いテキストにするとどうなるでしょう。

おそらく、デスクトップ表示ならばすべての文章が入りきるでしょうか。しかし、スマートフォンなど、画面サイズを狭めると、入りきらないテキストが見切れていることでしょう。

レスポンシブデザインでの縦書き表示は、まだまだ課題が残りそうです。使いどころに注意したいものですね！

とはいえ、縦書きレイアウトがCSSで実装できるようになったことは大変喜ばしいです！今までデザインで縦書きにしていた部分は、ブラウザ対応を考えて画像を採用してたものの、できるならテキストで表現したかったのが本音…。javascriptを使う方法もあったけど、コードが増えるのでなかなか敷居が高かったのです。
今後、CSSでの縦書き表現をプロジェクトに取り入れていくのが楽しみですね！

ちなみに、本サイトではもともとPCトップページのリード文に縦書きの画像を採用していたところを、これを機にテキスト化してみましたよ。