WEBサイトで縦書き！俳句や短歌などで使える縦書きにするCSSデザイン

※当サイトにはプロモーションが含まれています。

クライアント

短歌や和歌を公表したいから、縦書きする方法を教えてくれ！

にゃテック

おけまるだにゃ

Webサイトでは通常、左から右に横書きで文章を表示しますが、短歌や和歌など、日本語ならではの表現を活かしたい場合には、下記のように縦書きで表示したくなることがあるかもしれません。

世の人は
我を何とも
言わば言え
我が成すことは
我のみぞ知る

にゃのらいと

坂本龍馬だにゃ

そのため、今回は日本語を縦書き表示するCSSを作成してみました（英語や数字の縦書き表示可能）。

日本語などを縦書き表示するCSS

日本語などを縦書きに表示するCSSです。

HTML

<div class="nya-tategaki">大空に<br>
翔ける一打は<br>
谷越えて<br>
静けき平野に<br>
響く歓声</div>

CSS

.nya-tategaki {
writing-mode: vertical-rl;
text-orientation: upright;
line-height: 1.8;
height: 300px;
width: 200px;
border: 1px solid #ccc;
padding: 1em;
display: flex;
align-items: center;
justify-content: center;
}

実際に記述すると下記のように表示されます。

大空に
翔ける一打は
谷越えて
静けき平野に
響く歓声

コードについて補足説明をします。

writing-mode: vertical-rlで、縦書き表示にすることができます。

text-orientation: uprightは、英数字を縦にすることができます（縦書き表示にした際に、英数字は横倒しになってしまいます）。

また、添削や解説をする時などは、ルビ（中点）を表示したい時があるかもしれません。

大・空に
翔・ける一打は
谷・越えて
静けき平・野に
響く歓声

にゃのらいと

「大」「谷」「翔」「平」の文字が隠れているにゃ

上記のように、縦書きにルビ（中点）を振るには下記のように記載します。

HTML

<div class="nya-tategaki">
<div>
<ruby>大<rt>・</rt></ruby>空に<br>
<ruby>翔<rt>・</rt></ruby>ける一打は<br>
<ruby>谷<rt>・</rt></ruby>越えて<br>
静けき<ruby>平<rt>・</rt></ruby>野に<br>
響く歓声
</div>
</div>

<ruby>は「漢字＋ふりがな」用のタグですが、任意のマークや点も添えることができるので、縦書き時の「右横に点をつける」に応用しました。

また、Flexbox（フレックスボックス）のalign-itemsやjustify-contentは、直下の要素にしか効かないため、中にさらに <div>を入れて、その要素ごと中央に寄せています。

CSS

.nya-tategaki {
writing-mode: vertical-rl;
text-orientation: upright;
line-height: 1.8;
height: 300px;
width: 200px;
border: 1px solid #ccc;
padding: 1em;
display: flex;
align-items: center;
justify-content: center;
}

.nya-tategaki ruby rt {
font-size: 1.2em;
transform: translateX(0.6em); /* 点を右横に寄せる */
writing-mode: horizontal-tb;
}

transform: translateX(…)を使うことで、中点（・）の位置を漢字の右横に微調整しています。

また、writing-mode: horizontal-tbは、”horizontal”（横方向）に、”tb”＝top to bottom（上から下へ）という意味で、通常の日本語や英語の横書きと同じ向きです。

にゃのらいと

縦書き表示中に一部の要素だけ横向きで表示させたいときに使うにゃ。

その他にも、下記のように蛍光マーカーで表示させることも可能です。

大空に
翔ける一打は
谷越えて
静けき平野に
響く歓声

上記の様に、縦書きに蛍光マーカーを引くには下記のように記載します。

HTML

<div class="nya-wrapper">
<div class="tategaki">
大空に<br>
翔ける一打は<br>
谷越えて<br>
静けき平野に<br>
<span class="line-orange-vertical">響く歓声</span>
</div>
</div>

親要素に、FlexBoxを適用させたいので、nya-wrapperで囲むようにしました。

CSS

.nya-wrapper {
display: flex;
justify-content: center;
align-items: flex-start;
}

.nya-tategaki {
writing-mode: vertical-rl;
text-orientation: upright;
border: 1px solid #ccc;
font-weight:800;
font-size: 1.2em;
line-height: 1.8;
height: 300px;
width: 200px;
padding: 1em;
display: inline-block;
}

.line-orange-vertical {
background: linear-gradient(to right, transparent 58%, #fde1a7 0%) !important;
display: inline;
padding: 1px;
}

右側にマーカーを表示させるために、linear-gradientでは、to rightを指定しています。

縦書き表示を使う場面はそんなに多くないとは思いますが、参考になれば幸いです。