【CSS】文字を縦書きにする方法

2022.09.05

CSSで文字を縦書きにする方法を紹介します。

見やすさを考えると、基本的にWebサイトの文章は横書きで作ると思うので、あまり使用頻度は高くないかもしれませんが、見出し等にアクセントを付けたいときなどに使用することがあります。

サンプル

CSSで文字を縦書きにするには、writing-mode プロパティと text-orientation プロパティを組み合わせて使用します。

writing-mode プロパティは、テキストの方向を設定します。vertical-rl を指定すると、右から左に縦書きになります。

text-orientation プロパティは、行内のテキストの向きを設定します。upright を指定すると、すべての文字を縦書きにできます。

以下は、HTMLとCSSの例です。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>文字を縦書きにする</title>
  <style>
    .vertical {
      writing-mode: vertical-rl;
      text-orientation: upright;
    }
  </style>
</head>
<body>
  <div class="vertical">
    これは縦書きです。
  </div>
</body>
</html>

サンプル

これは縦書きです。

プロパティの値

writing-mode プロパティの値は、以下のとおりです。

  • horizontal-tb：横書き
  • vertical-rl：右から左に縦書き
  • vertical-lr：左から右に縦書き

text-orientation プロパティの値は、以下のとおりです。

  • mixed：デフォルト値。日本語は縦、英語は横に表示される。
  • upright：すべての文字を縦書きに表示する。
  • sideways：すべての文字を横書きに表示する。

その他のプロパティ

text-combine-upright プロパティを指定すると、1文字分の幅に表示する文字を設定できます。デフォルト値は compatibility で、ブラウザの互換性を考慮して文字を組み合わせます。force を指定すると、文字を必ず組み合わせて表示します。

以下は、text-combine-upright プロパティを force に指定した例です。

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

text-combine-upright プロパティは、文字の表示サイズや行の高さに影響を与える可能性があるため、注意して使用してください。

サンプル

これは縦書きで、1文字分の幅に表示されています。

まとめ

CSSで文字を縦書きにするには、writing-mode プロパティと text-orientation プロパティを組み合わせて使用します。

writing-mode プロパティでテキストの方向を設定します。

text-orientation プロパティで行内のテキストの向きを設定します。

また、text-combine-upright プロパティを指定すると、1文字分の幅に表示する文字を設定できます。