【縦書きにするCSSプロパティ】writing-modeの使い方【和風】

和食や旅館のホームページなどで文字が縦書きになっていると、
一気に和風な雰囲気になりますよね。

今回はCSSで縦書きにすることができるプロパティ
「writing-mode」の使い方についてまとめてみます。

writing-modeプロパティの説明

まずプロパティについて、MDNの説明を参照してみたいと思います。

writing-mode は CSS のプロパティで、テキストの行のレイアウトを横書きにするか縦書きにするか、ブロックのフロー方向を左向きにするか右向きにするかを設定します。文書全体に設定する場合は、ルート要素 (HTML 文書の場合は html 要素) に設定してください。

出典：MDN web docs CSS writing-mode

「縦書き」か「横書き」かだけでなく、
「左右の向き」もコントロールできるプロパティなんですね。

縦書きのプロパティの値は、2種類あります。

縦書き以外のプロパティの値もありますが、今回は割愛します。

verticalのあとのアルファベット「r」と「l」は、それぞれ右(right)と左(left)の頭文字で、「rl」は「右から左」、「lr」は「左から右」、と方向の流れを表しているようです。

日本語の文章は右から左へ読んでいくので、「vertical-rl」を使用すればOKですね！

writing-modeを実際に使ってみよう

こんなかんじのサンプルを作ってみました。
メインビジュアルに縦書きでコピーが入っているイメージです。

See the Pen
ExPgLYq by notebook (@orange-notebook)
on CodePen.

今回はSCSSで書いています。

div {
  > div {
    padding-top: 10px;
    padding-right: 10px;
    writing-mode: vertical-rl;
  }
}

縦書きで右から左の方向で設定したいので、
pタグ「ようこそ日本へ」、「縦書きは和風ですね」2行の親要素であるdivタグに
「writing-mode: vertical-rl;」を設定しました。

以上、縦書きにするプロパティwriting-modeの使い方でした。

最後までお読みいただき、ありがとうございました。