【CSS】writing-mode - テキストの横書き・縦書き

CSSのwriting-modeプロパティについて解説します。

検証環境

CSS

macOS

14.1

writing-mode

writing-modeは“テキストの横書き・縦書き”のプロパティです。

基本構文

writing-mode: 値;

値

代表的な値は次の通りです。

値	意味
horizontal-tb	横書き
vertical-rl	縦書き（右開始）
vertical-lr	縦書き（左開始）

サンプル

横書き

横書きテキストのサンプルです。

sample.html

<style>
p {
    ___ih_hl_start
    writing-mode: horizontal-tb;
    ___ih_hl_end
}
</style>

<p>
 CSS : Cascading Style Sheets<br>
 CSSは“HTML等の要素を装飾する言語”です。
</p>

プレビュー

縦書き（右開始）

縦書き（右開始）テキストのサンプルです。

sample.html

<style>
p {
    ___ih_hl_start
    writing-mode: vertical-rl;
    ___ih_hl_end
}
</style>

<p>
 CSS : Cascading Style Sheets<br>
 CSSは“HTML等の要素を装飾する言語”です。
</p>

プレビュー

縦書き（左開始）

縦書き（左開始）テキストのサンプルです。

sample.html

<style>
p {
    ___ih_hl_start
    writing-mode: vertical-lr;
    ___ih_hl_end
}
</style>

<p>
 CSS : Cascading Style Sheets<br>
 CSSは“HTML等の要素を装飾する言語”です。
</p>

プレビュー