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

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

ついに縦書きレイアウトがW3Cで勧告されましたね! 和のテイストのサイトなどでも重宝するし、表現の幅も広がりそうです。 早速本WEBサイトにも適用してみました。

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の値には下記があります。

horizontal-tb(lr-tb) 横書き、上から下へ改行
vertical-rl(tb-rl) 縦書き、右から左へ改行
vertical-lr(tb-lr) 縦書き、左から右へ改行

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

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

horizontal-tb

2020年、
いよいよ東京に
オリンピックが‼

vertical-rl

2020年、
いよいよ東京に
オリンピックが‼

vertical-lr

2020年、
いよいよ東京に
オリンピックが‼

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

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

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

text-orientation

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

mixed

text-orientation: mixed;

2020年、
いよいよ東京に
オリンピックが‼

upright

text-orientation: upright;

2020年、
いよいよ東京に
オリンピックが‼

sideways

text-orientation: sideways;

2020年、
いよいよ東京に
オリンピックが‼

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

mixed ラテン文字などの横書きが標準の文字は右向き、仮名や漢字など縦書きが標準の文字は上向きに表示します
upright すべての文字を上向きに表示します。
sideways すべての文字を右向きに表示します。

ただし、残念ながら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>

この記事は
20191214日に
公開しました‼

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>

東京スカイツリー®

10m2

CO2

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

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

<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での縦書き表示は
要注意!

あらいやだ。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;
}

実装結果

IEでの縦書き表示は
要注意!

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

長い文章の表示

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

そのころわたくしは、モリーオ市の博物局に勤めて居りました。

十八等官でしたから役所のなかでも、ずうっと下の方でしたし俸給もほんのわずかでしたが、受持ちが標本の採集や整理で生れ付き好きなことでしたから、わたくしは毎日ずいぶん愉快にはたらきました。殊にそのころ、モリーオ市では競馬場を植物園に拵え直すというので、その景色のいいまわりにアカシヤを植え込んだ広い地面が、切符売場や信号所の建物のついたまま、わたくしどもの役所の方へまわって来たものですから、わたくしはすぐ宿直という名前で月賦で買った小さな蓄音器と二十枚ばかりのレコードをもって、その番小屋にひとり住むことになりました。わたくしはそこの馬を置く場所に板で小さなしきいをつけて一疋の山羊を飼いました。毎朝その乳をしぼってつめたいパンをひたしてたべ、それから黒い革のかばんへすこしの書類や雑誌を入れ、靴もきれいにみがき、並木のポプラの影法師を大股にわたって市の役所へ出て行くのでした。

あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。

またそのなかでいっしょになったたくさんのひとたち、ファゼーロとロザーロ、羊飼のミーロや、顔の赤いこどもたち、地主のテーモ、山猫博士のボーガント・デストゥパーゴなど、いまこの暗い巨きな石の建物のなかで考えていると、みんなむかし風のなつかしい青い幻燈のように思われます。では、わたくしはいつかの小さなみだしをつけながら、しずかにあの年のイーハトーヴォの五月から十月までを書きつけましょう。

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

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

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

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

この記事が役に立ったらシェアしてください!

  1. CSSで縦書きレイアウトを組む
  2. 縦書きのテキストの向きを調整する
  3. デザイン上の挙動を確認する
  4. 縦書きで注意したいこと