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

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

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

writing-mode プロパティを使えば、Webページ上のテキストを簡単に縦書きにできます。和風デザインのサイトや見出しのアクセント、サイドバーの装飾など、活用シーンは意外と多くあります。

この記事では、基本的な使い方から実践的なデザイン例まで、コピペで使えるサンプルコード付きで紹介します。

スポンサーリンク

writing-modeプロパティとは

writing-mode は、テキストの書字方向（横書き・縦書き）を指定するCSSプロパティです。

値 説明 方向
horizontal-tb 横書き（デフォルト） 左→右、上→下
vertical-rl 縦書き（右→左） 上→下、右→左
vertical-lr 縦書き（左→右） 上→下、左→右

横書きと縦書きの違い

  • horizontal-tb：通常のWebページと同じ横書き
  • vertical-rl：日本語の縦書き（新聞・小説のように右から左へ）
  • vertical-lr：モンゴル語のように左から右へ進む縦書き

基本的な縦書きの書き方

もっともシンプルな縦書きの実装方法です。

HTML
<!-- 縦書きにしたい要素にクラスを付ける -->
<div class="vertical-text">
  CSSで縦書きにする
</div>
CSS
.vertical-text {
  writing-mode: vertical-rl;
}

表示結果

CSSで縦書きにする

writing-mode: vertical-rl を指定するだけで、テキストが縦書きになります。日本語はそのまま正しい向きで表示されます。

text-orientationプロパティ

縦書きにすると、英数字の向きが横向きのままになることがあります。text-orientation プロパティで文字の向きを制御できます。

値 説明
mixed デフォルト。日本語は縦向き、英数字は横向き（90°回転）
upright すべての文字を縦向き（正立）に表示
sideways すべての文字を横向き（90°回転）に表示

mixed（デフォルト）とuprightの違い

CSS
/* mixed（デフォルト）：英数字が横向き */
.mixed {
  writing-mode: vertical-rl;
  text-orientation: mixed;
}

/* upright：すべて縦向き */
.upright {
  writing-mode: vertical-rl;
  text-orientation: upright;
}

表示結果の比較

mixed（デフォルト）
CSS3で縦書き
upright
CSS3で縦書き

mixed では「CSS」「3」が横向き（回転した状態）で表示され、upright ではすべての文字が正立して表示されます。

text-combine-uprightで縦中横

縦書きの中で、特定の文字列（年号や数字など）を横並びにしたい場合は text-combine-upright を使います。これは「縦中横（たてちゅうよこ）」と呼ばれるレイアウトです。

HTML + CSS
<style>
  .vertical {
    writing-mode: vertical-rl;
  }
  .tcy {
    text-combine-upright: all;
  }
</style>

<div class="vertical">
  令和<span class="tcy">８</span>年
  <span class="tcy">３</span>月
  <span class="tcy">11</span>日
</div>

表示結果

令和８年３月11日

注意：text-combine-upright: all は2〜3文字程度が目安です。文字数が多いと1文字分のスペースに収まらず、読みにくくなります。

vertical-rlとvertical-lrの違い

複数行のテキストで違いが現れます。

CSS
/* 右→左（日本語の一般的な縦書き） */
.vertical-rl { writing-mode: vertical-rl; }

/* 左→右 */
.vertical-lr { writing-mode: vertical-lr; }

表示結果の比較

vertical-rl（右→左）
一行目のテキスト　二行目のテキスト
vertical-lr（左→右）
一行目のテキスト　二行目のテキスト

ポイント：日本語の縦書きには vertical-rl を使うのが一般的です。新聞や小説と同じ、右から左へ行が進む方向です。

実践的な使用例

和風デザインの見出し

HTML + CSS
<style>
  .japanese-heading {
    writing-mode: vertical-rl;
    font-size: 24px;
    letter-spacing: 0.15em;
    padding: 20px 10px;
    border-right: 3px solid #1e293b;
    font-weight: bold;
  }
</style>

<h2 class="japanese-heading">お品書き</h2>

お品書き

サイドバーの装飾テキスト

CSS
.side-label {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  background: linear-gradient(180deg, #0284c7, #0369a1);
  color: #fff;
  padding: 16px 8px;
  border-radius: 8px;
  font-size: 14px;
  letter-spacing: 0.2em;
}
PICK UP 注目記事

レイアウトへの組み込み

縦書きテキストを横書きコンテンツと組み合わせてレイアウトする例です。

HTML + CSS
<style>
  .card-with-label {
    display: flex;
    gap: 16px;
    align-items: stretch;
  }
  .card-label {
    writing-mode: vertical-rl;
    background: #1e293b;
    color: #fff;
    padding: 12px 8px;
    font-size: 14px;
    letter-spacing: 0.1em;
    border-radius: 8px 0 0 8px;
  }
  .card-body {
    padding: 16px;
    flex: 1;
  }
</style>

<div class="card-with-label">
  <div class="card-label">お知らせ</div>
  <div class="card-body">
    <p>横書きのコンテンツ...</p>
  </div>
</div>
お知らせ

サイトリニューアルのお知らせ

デザインを一新しました。より見やすく、使いやすいサイトを目指します。

縦書きでよくある問題と対処法

英数字の向きがおかしい

問題 対処法
英字が横向きになる text-orientation: upright を指定
数字を横並びにしたい text-combine-upright: all を<span>で指定
高さが制御できない height を明示的に指定する
要素の幅が広がりすぎる width: fit-content や max-width を指定

heightの指定が必要な場面

縦書きでは、テキストは上から下に流れ、行は右から左（vertical-rlの場合）に進みます。height を指定しないとテキストが無限に下へ伸び、行の折り返しが発生しません。

CSS
.vertical-text {
  writing-mode: vertical-rl;
  height: 300px;  /* 高さを指定して折り返しを制御 */
}

ブラウザ対応状況

プロパティ Chrome Firefox Safari Edge
writing-mode 48+ 41+ 11+ 12+
text-orientation 48+ 41+ 14+ 79+
text-combine-upright 48+ 48+ 15.4+ 79+

ポイント：すべてのモダンブラウザで対応済みです。IE11でも writing-mode は -ms- プレフィックス付きで利用できましたが、現在はプレフィックスなしで問題ありません。

よくある質問（FAQ）

Q. CSSでテキストを縦書きにするにはどうすればよいですか？
A. writing-mode: vertical-rl;（右から左）またはwriting-mode: vertical-lr;（左から右）で縦書きにできます。日本語コンテンツに最適です。英数字はtext-orientation: mixed;（デフォルト）で横向きになり、text-orientation: upright;で縦向きになります。
Q. 縦書きテキストを水平・垂直中央に配置するにはどうすればよいですか？
A. Flexboxを使います：.container { display: flex; justify-content: center; align-items: center; }。縦書きのテキスト要素にwriting-mode: vertical-rl;を設定します。Flexboxの軸方向が縦書きでも水平になるため、直感と逆になることに注意が必要です。
Q. 縦書きで句読点（。、）の位置が正しくならない場合の対処法は？
A. text-orientation: mixed;では句読点が正しい縦書き位置になります。font-feature-settings: "vkrn";でOpenTypeの縦書き字形切り替えが使えるフォントがあります。環境（OS・フォント）によって表示が異なるため、主要ブラウザ・OSでの確認が必要です。

まとめ

プロパティ 用途
writing-mode: vertical-rl テキストを縦書きにする（右→左）
text-orientation: upright 英数字も正立（縦向き）にする
text-combine-upright: all 縦中横（特定の文字を横並びに）
height 縦書きの高さ制御・行の折り返し

CSSの writing-mode プロパティを使えば、簡単にテキストを縦書きにできます。和風デザインの見出しやサイドバーの装飾、レイアウトのアクセントなど、使いどころを工夫すれば、サイトのデザインに個性を出せます。

text-orientation で英数字の向きを調整し、text-combine-upright で縦中横を実現すれば、より自然な縦書きレイアウトが作れるでしょう。