通常のウェブサイトはテキストを横にするケースがほとんどかと思います。まれに和テイストのサイトの場合、テキストを縦にするケースがあるかと思います。今まで、そのケースがなかったため、縦にするためのCSSを知りませんでした。今回、そのケースがあったため、調べてできましたので、備忘録のため、投稿しました。いくつか方法があるようですが、今回は下記のように書いていきます。
HTML
<div class=”vertical-text”>縦書きのテキスト</div>
CSS
.vertical-text {
writing-mode: vertical-rl; /* テキストを縦書きにする */
text-orientation: upright; /* テキストの方向を直立にする */
}
縦書きになりました。
