English 中文 العربية 日本語 Português

writing-mode プロパティ

最終更新：2026-09-13

writing-mode writing-mode プロパティ

writing-mode プロパティはテキストの全体的なレイアウト方向を設定し、水平（horizontal-tb）と垂直（vertical-rl、vertical-lr）のモードをサポートします。中国の古典や日本の書籍のような縦書きテキストを作成するために使用され、ブロック要素やインライン要素の配置方法も変更するため、東アジアの組版において重要なツールです。

カテゴリ
初期値horizontal-tb
継承はい
適用対象
アニメーションタイプ
CSS バージョンCSS3
状態標準

📝 構文

writing-mode: horizontal-tb | vertical-rl | vertical-lr;

⚙️ 値

値タイプ説明
horizontal-tb | vertical-rl | vertical-lrキーワード書字方向の値

▶ 例

以下のコードを編集して、プレイグラウンドでライブ結果を確認してください：

▶ 試す

🌐 ブラウザーサポート

ブラウザー ChromeChrome EdgeEdge FirefoxFirefox SafariSafari OperaOpera
writing-mode ✓ v43 ✓ v12 ✓ v16 ✓ v9 ✓ v30
すべての主要ブラウザーでサポート
ヒント： vertical-rl は中国の書籍の伝統的なレイアウト（上から下へ、右から左へ）です。vertical-lr は一部のモンゴル語や日本語のレイアウトに使用されます。
重要： writing-mode は CSS 論理プロパティの方向マッピングを変更します。例えば、垂直レイアウトでは width は block-size に、height は inline-size にマップされます。

❓ よくある質問

QCSS で writing-mode と direction の違いは何ですか？
Adirection はテキストの流れ（左または右）だけを変更し、要素は水平のままです。writing-mode はレイアウト全体の方向を変更し、ブロック要素を垂直に積み重ね、インラインコンテンツも垂直に表示します。
Qvertical-rl のような垂直書字モードでは文字が回転しますか？
Avertical-rl と vertical-lr では文字は正立したままで、上から下へ並べられるだけです。字形を 90 度回転させる必要がある場合は、さらに text-orientation: sideways を使用します。
Qwriting-mode プロパティを使って中国語の縦書きテキストを作成するにはどうすればよいですか？
Awriting-mode: vertical-rl を設定すると、テキストは上から下へ、右から左へ流れ、中国の古典のレイアウトを模倣します。vertical-lr は左から右へ流れる縦書きになります。デフォルトでは文字は正立したままで回転しません。
direction
writing-mode — text-fonts チュートリアル

📚 関連チュートリアル

direction プロパティ
テキストの書字方向を制御します。
Web-Tutorial.com

Web-Tutorial 技術チーム

複数の開発者によって共同維持されているプログラミングチュートリアルプラットフォーム。各チュートリアルは専門分野の開発者が執筆・レビューしています。正確で信頼性の高いコンテンツを目指しています — 問題を見つけた場合はお知らせください。

100%