CSSのwriting-modeでテキストの書字方向を指定する方法をわかりやすく解説

writing-modeプロパティは、テキストの流れ（書字方向）を指定するために使用されます。通常、横書き（left-to-right）や縦書き（top-to-bottom）を指定できますが、このプロパティを使うことで、異なる書字方向を簡単に設定することができます。

writing-modeプロパティの値とその効果の一覧

• horizontal-tb: 左から右に、上から下にテキストを表示します。通常の横書きテキストです。
• vertical-rl: 右から左に、上から下にテキストを表示します。縦書きのスタイルです。
• vertical-lr: 左から右に、上から下に縦書きでテキストを表示します。

注意点や関連情報

writing-modeは、テキストの表示方向に影響を与えるため、縦書きと横書きを使い分けたい場合に便利です。縦書きレイアウトは特に日本語のコンテンツで使用されます。また、ブラウザによっては一部の古いバージョンでサポートが不完全な場合があるため、モダンブラウザを使用することが推奨されます。

writing-modeが効かない時の原因と対策

テキストの方向を制御する他のプロパティが干渉している

writing-modeはテキストの表示方向を制御しますが、同時にtext-alignやdirectionなどの他のテキスト関連プロパティが設定されている場合、これらが干渉して思うように動作しないことがあります。

対策: text-alignやdirectionの設定を確認し、writing-modeと競合しないように調整します。特に、directionが左から右（ltr）や右から左（rtl）に設定されている場合、writing-modeの動作に影響を与えることがあるので、必要に応じて修正します。

共通するCSSコード

.css-sample-container {
    border: 1px solid #333;
    padding: 20px;
    margin-bottom: 20px;
    background-color: #f9f9f9;
    max-width: 100%;
    max-height: 240px;
    box-sizing: border-box;
    overflow: hidden;
}
    

writing-mode: horizontal-tb

通常の横書きテキストで、左から右、上から下に表示されます。これは多くのウェブページでデフォルトの書字方向です。

HTMLコード

<div class="css-sample-container">
    <div class="css-sample-writing-mode-horizontal-tb">
        これは横書きのテキストです。通常の書字方向（left to right）に従います。
    </div>
</div>
    

CSSコード

.css-sample-writing-mode-horizontal-tb {
    width: 100%;
    writing-mode: horizontal-tb;
    background-color: lightyellow;
}
    

writing-mode: vertical-rl

縦書きで右から左、上から下にテキストが表示されます。日本語の縦書きレイアウトでよく使われるスタイルです。

HTMLコード

<div class="css-sample-container">
    <div class="css-sample-writing-mode-vertical-rl">
        これは縦書きのテキストです。右から左に読み進めます。
    </div>
</div>
    

CSSコード

.css-sample-writing-mode-vertical-rl {
    width: 100%;
    writing-mode: vertical-rl;
    background-color: lightblue;
}
    

writing-mode: vertical-lr

縦書きで左から右、上から下にテキストが表示されます。一般的ではありませんが、特定のレイアウトやデザインで使用されることがあります。

HTMLコード

<div class="css-sample-container">
    <div class="css-sample-writing-mode-vertical-lr">
        これは左から右に読み進める縦書きのテキストです。
    </div>
</div>
    

CSSコード

.css-sample-writing-mode-vertical-lr {
    width: 100%;
    writing-mode: vertical-lr;
    background-color: lightgreen;
}
    

まとめ

• writing-modeプロパティは、テキストの書字方向を変更するために使用されます。
• horizontal-tb: 通常の横書きテキストで、左から右、上から下に表示されます。
• vertical-rl: 縦書きで、右から左、上から下にテキストが表示されます。
• vertical-lr: 縦書きで、左から右、上から下にテキストが表示されます。