CSSの縦書きレイアウトを完全解説！初心者でもわかるwriting-modeの使い方

縦書きレイアウトの実装方法（writing-mode）

先生と生徒の会話形式で理解しよう

生徒

「縦書きの文章ってWebページでも作れるんですか？」

先生

「はい、CSSのwriting-modeプロパティを使えば、縦書きのレイアウトが簡単に作れますよ。」

生徒

「どうやって使うんですか？文章が上から下に並ぶようにしたいです。」

先生

「それでは、縦書きにする基本の使い方から見ていきましょう！」

1. writing-modeとは？

CSSのwriting-modeプロパティは、テキストの流れる方向を設定するために使います。普段の横書きは「左から右」に文字が流れますが、縦書きにすると「上から下」や「右から左」に文字が並ぶようになります。

日本語の本や新聞のような縦書きのデザインを、Webページでも再現できるのがこのwriting-modeです。

初心者の方はまず、どのように書けば縦書きになるのか、基本の構文を覚えましょう。

2. writing-modeの基本的な使い方

まずは最もシンプルな縦書きの指定方法を見てみましょう。以下のようにwriting-mode: vertical-rl;と書くと、文章が縦に並びます。


<style>
.vertical-text {
    writing-mode: vertical-rl;
    border: 1px solid #000;
    padding: 10px;
    font-size: 18px;
}
</style>

<div class="vertical-text">
    これは縦書きのテキストです。Webページでも縦書きができます。
</div>

ブラウザ表示

vertical-rlとは「縦方向で、右から左へテキストが流れる」という意味です。日本語の縦書きではこの設定が一般的です。

3. 他にもあるwriting-modeの指定方法

writing-modeには他にもいくつかの値があります。それぞれの特徴を見てみましょう。

horizontal-tb（初期値）：横書きで上から下へ。通常のWebページの書き方。
vertical-rl：縦書きで右から左へ進む。日本語に最適。
vertical-lr：縦書きで左から右へ進む。あまり使われないが一部デザインで使用。

縦書きの方向が違うだけでも、見た目の印象が大きく変わります。

4. 縦書きで注意すべき点とは？

縦書きを使う際に注意しておきたいことがあります。以下のポイントを覚えておくとトラブルを防げます。

幅と高さの設定に注意：縦書きでは「高さ」が「行の長さ」に相当します。見た目が崩れないように、widthではなくheightを調整しましょう。
英語や数字の扱い：英語や数字が縦に並ぶと読みにくくなります。場合によっては、横書きのまま表示した方がよいです。
スマホ表示とのバランス：スマートフォンの画面は横幅が狭いため、縦書きレイアウトだと読みにくくなることがあります。

5. デザインに合わせた応用例

縦書きを使うことで、Webサイトに和風やクラシックな雰囲気を出すことができます。たとえば、詩や俳句を紹介するページ、旅館のホームページ、伝統文化に関するコンテンツなどで使われることが多いです。

以下は、俳句を縦書きで表示する例です。


<style>
.haiku {
    writing-mode: vertical-rl;
    font-family: "serif";
    font-size: 20px;
    border: 1px solid #aaa;
    padding: 15px;
    background-color: #fdf6e3;
    width: 100px;
}
</style>

<div class="haiku">
    古池や<br>
    蛙飛びこむ<br>
    水の音
</div>

ブラウザ表示

6. writing-modeと合わせて使いたいCSSプロパティ

縦書きをより見やすく整えるためには、text-orientationプロパティと合わせて使うのがおすすめです。これは、文字の向きを細かく制御できる設定です。

text-orientation: mixed;（初期値）アルファベットや数字は横向きのまま。
text-orientation: upright; すべての文字を縦向きに揃える。

例えば英語を「縦に揃えたい」場合にはuprightを使いましょう。


<style>
.vertical-upright {
    writing-mode: vertical-rl;
    text-orientation: upright;
    font-size: 18px;
    padding: 10px;
    border: 1px solid #000;
}
</style>

<div class="vertical-upright">
    Tokyo2020 オリンピック
</div>

ブラウザ表示