【初心者向け】HTMLで使えるCSSでテキストを縦書きにする方法
目次
CSSでHTMLのテキストを縦書きにするには？
CSSで縦書きを実装する基本的な方法は、writing-modeプロパティを使用することです。
通常のWebページでは横書き（左から右）ですが、このプロパティにより日本語の新聞や縦書き文書のように縦書き （右から左）にすることもできます。
<p class="vertical-text">
あいうえお<br>
かきくけこ<br>
さしすせそ<br>
</p>.vertical-text {
writing-mode: vertical-rl;
}writing-modeの値と意味
writing-modeプロパティには主に以下の値があります。
| 値 | 特徴 |
|---|---|
horizontal-tb | 横書き（上から下）：デフォルトの設定（通常のWebページ） |
vertical-rl | 縦書き（右から左）：日本語の縦書き で一般的 |
vertical-lr | 縦書き（左から右）：左側から行が進む（珍しい） |
sideways-rl | 横向きのまま縦書き（右から左）：文字を回転させず、縦方向に配置 |
sideways-lr | 横向きのまま縦書き（左から右）：sideways-rl の逆 |
▼値に使われている単語の意味
horizontal：水平（横書き）
vertical：垂直（縦書き）
sideways：横向き（文字の向きを変えずに縦書き）
rl：Right to Left（右から左へ進む）
lr：Left to Right（左から右へ進む）
tb：Top to Bottom（上から下へ進む）
horizontal-tb
writing-modeプロパティを設定していない場合と同じ、デフォルトの横書き状態になります。
左 → 右 に文字が並び、行は上 → 下 に進みます。（通常のWebページ）
<p class="vertical-text">
あいうえお<br>
ABCDE<br>
12345<br>
ｱｲｳｴｵ
</p>.vertical-text {
writing-mode: horizontal-tb;
}vertical-rl
教科書や新聞でも見る一般的な縦書きの状態になります。
文字は上 → 下 に並び、行は右 → 左 に進みます。
<p class="vertical-text">
あいうえお<br>
ABCDE<br>
12345<br>
ｱｲｳｴｵ
</p>.vertical-text {
writing-mode: vertical-rl;
}vertical-lr
縦書きにはなりますが、vertical-rlとは逆向きになり珍しい形になります。
文字は上 → 下 に並び、行は左→右に進みます。
<p class="vertical-text">
あいうえお<br>
ABCDE<br>
12345<br>
ｱｲｳｴｵ
</p>.vertical-text {
writing-mode: vertical-lr;
}sideways-rl
vertical-rlやvertical-lrでは文字が縦書きになってもアルファベットや数字が横向きでしたが、sideways-rlでは文字も横向きに並びます。
英語の向きを変えずに縦方向に配置するため、デザイン向きです。
上 → 下 に並び、行は右→左に進み、全体が文字が90度回転します。
<p class="vertical-text">
あいうえお<br>
ABCDE<br>
12345<br>
ｱｲｳｴｵ
</p>.vertical-text {
writing-mode: sideways-rl;
}sideways-lr
sideways-rlは全体が90度回転していましたが、sideways-lrではマイナス90度回転します。
こちらもデザイン向きのレイアウトです。
<p class="vertical-text">
あいうえお<br>
ABCDE<br>
12345<br>
ｱｲｳｴｵ
</p>.vertical-text {
writing-mode: sideways-lr;
}縦書きテキストの位置調整
縦書きにしたテキストを 左右に寄せる には、親要素にdisplay: flex;プロパティを適応させる必要があります。text-alignでできると思われがちですが、縦書きの場合は軸が90度回転しているため、text-alignは左右ではなく “上・中央・下” に配置される ことに注意しましょう。
また、marginではfirefoxブラウザで中央寄せできないことにも注意しましょう。
右寄せ（flex-end）
<div class="vertical-box">
<p class="vertical-text">
あいうえお<br>
ABCDE<br>
12345<br>
ｱｲｳｴｵ
</p>
</div>.vertical-box {
display: flex;
justify-content: flex-end;
}
.vertical-text {
writing-mode: vertical-rl;
border: 1px solid black;
}中央寄せ（center）
<div class="vertical-box">
<p class="vertical-text">
あいうえお<br>
ABCDE<br>
12345<br>
ｱｲｳｴｵ
</p>
</div>
.vertical-box {
display: flex;
justify-content: center;
}
.vertical-text {
writing-mode: vertical-rl;
border: 1px solid black;
}左寄せ（flex-start）
<div class="vertical-box">
<p class="vertical-text">
あいうえお<br>
ABCDE<br>
12345<br>
ｱｲｳｴｵ
</p>
</div>.vertical-box {
display: flex;
justify-content: flex-start;
}
.vertical-text {
writing-mode: vertical-rl;
border: 1px solid black;
}text-orientationで縦書き文字を調整する方法
英数字や記号の回転
半角の文字、英数字や一部の記号（.,!? など）が横向きのままになるときのはtext-orientation: upright;を使うことで解決できます。
これで英数字も縦向きになります。ただし、uprightにすると改行時に英単語が1文字ずつ縦に並ぶので、長い英単語はspanで囲ってtext-combine-uprightを使いましょう。
<div class="vertical-text">
あいうえお<br>
ABCDE<br>
12345<br>
ｱｲｳｴｵ<br>
.,!?
</div>.vertical-text {
writing-mode: vertical-rl;
text-orientation: upright;
}数字や英字を1文字の幅で表示
text-combine-upright: all;を使うと2024 のような数字が1つのブロックに収まり、横書きのように表示されます。ただし、文字数が多いとギチギチになります。
<div class="vertical-text">
あいうえお<br>
ABCDE<br>
<span>ｱｲｳｴｵ</span><br>
<span>24</span>
</div>.vertical-text {
writing-mode: vertical-rl;
}
.vertical-text span {
text-combine-upright: all;
}行の間隔が広がりすぎる
縦書きの行間隔が広くなりすぎることがあるため、line-heightで適宜調節しましょう。
<div class="vertical-text">
あいうえお<br>
ABCDE<br>
12345<br>
ｱｲｳｴｵ
</div>.vertical-text {
writing-mode: vertical-rl;
line-height: 1.4;
}ルビの付け方
ルビ（振り仮名）を付ける場合は、rubyタグを使用します。
ruby-position
<div class="vertical-text">
<ruby>漢<rt>かん</rt>字<rt>じ</rt></ruby>
</div>.vertical-text {
writing-mode: vertical-rl;
ruby-position: over;
}各ブラウザでの縦書きサポート状況
現代の主要なブラウザ（Chrome、Firefox、Safari、Edge）は、基本的な縦書きレイアウトをサポートしています。ただし、一部の高度な機能については、ブラウザ間で差異がある場合があります。
そういった場合にはブラウザ互換性を高めるために、ベンダープレフィックスを使用しましょう。
.vertical-text {
-webkit-writing-mode: vertical-rl;
-moz-writing-mode: vertical-rl;
-ms-writing-mode: tb-rl;
writing-mode: vertical-rl;
}まとめ
縦書きレイアウトを実現するには、writing-modeで基本の縦書きを設定し、text-orientationで英数字などの文字の向きを調整します。要素の位置調整にはflexboxを活用し、縦中横やルビの表示にも対応しましょう。あわせて、ブラウザごとの対応状況を考慮したコーディングが重要です。
▼より詳しい仕様については、公式リファレンス（MDN）をご覧ください
https://developer.mozilla.org/ja/docs/Web/CSS/writing-mode
▼HTMLの基本タグ一覧はこちらから
