webサイトは横書きが多いですが、縦書きがあるとそれだけでおしゃれなサイトに見えて、表現の幅が広がりますね。

今回はCSSでテキストを縦書きにする方法です。

CSSの書き方

CSS
p {
    writing-mode: vertical-rl;
}

解説

writing-modeは、縦書き・横書きと行ブロックを並べる方向を指定します。

horizontal-tb：横書き、上から下へ改行します。（初期値）
vertical-rl：縦書き、右から左へ改行します。
vertical-lr：縦書き、左から右へ改行します。

実装

ただし、レスポンシブのスマホ閲覧時に縦長になったり、高さを指定してしまうと、見切れてしまったりするので注意も必要です。

他にもあるよ。関連記事

• 【CSS】動くスクロールボタン
• Google Fontsとは？Google Fontsの使い方を解説（2022年）
• 【CSS】上下左右からスライドインするアニメーション