Written by Kasumi

【簡単】CSSで数字を縦向き・縦書きにする方法【text-orientation: upright;】

CSSで数字を縦向き・縦書きにしたい。

writing-mode: vertical-rl;プロパティを記述したら縦書きにはなるが、数字は横向きで縦書き表示されてしまう。縦書きで且つ縦向きにしたい。

本記事ではこのような悩みを解決します。

実装サンプル

See the Pen
CSS縦書き数字
by Kohei (@kouk05)
on CodePen.0

実装サンプルです。

左の数字が縦書きで横向き表示、右側が縦書きで縦向き表示になってます。

右側の縦書き縦向き数字の実装方法について次章より解説します。

縦書き縦向き数字にするCSS

.txt {
    writing-mode: vertical-rl;
    text-orientation: upright;
}

上記CSSをあてることで縦書き縦向き数字になります。

writing-modeプロパティを指定し、値にvertical-rlを入れる事で縦書きになります。

上記プロパティだけだと縦書き横向き数字になるのでtext-orientationプロパティを追記します。

値にuprightを入れる事で数字を縦向きに変更する事ができます。

以上の方法で縦向き縦書き数字が実装できます。

まとめ

サイトに載せる電話番号をPCでは縦書き表示にするご依頼があり、忘備録として実装方法を本記事に残してます。

ぜひ参考にしてみてください。

以上で解説を終わります。

目次

関連記事

HTMLCSS

justify-content: space-betweenで最後の横並び要素だけ中央に寄せる方法【CSS flexbox】

2022.10.03
1425
HTMLCSS jQuery

一枚画像に複数のリンクを場所指定して設置する方法【レスポンシブ対応】

更新日:2022.09.09
1256
HTMLCSS

【CSS】flexboxで最後の要素は右寄せ・最初の要素は左寄せにする方法

2022.07.14
972
WordPress プログラミング

Breadcrumb NavXTをカスタマイズ。パンくずにメインサイトを追加する方法。

2022.01.04
1277