【CSS Modules】writing-modeプロパティの使い方

writing-modeプロパティは、ウェブページ上のブロック要素が積み重なる方向と、そのブロック内でのテキストの進行方向を定義するプロパティです。このプロパティを使用することで、テキストが水平方向または垂直方向に表示されるか、またその際の読み進める方向（例えば、左から右、右から左、上から下など）を制御できます。

主に、日本語の縦書き表現や、アラビア語などの右から左へ記述する言語（RTL言語）の表示、あるいは特定のデザイン要件に合わせてテキストの向きを変更する際に活用されます。例えば、horizontal-tbという値を設定すると、テキストは水平方向に配置され、行は上から下へと進む、多くの西洋言語で一般的な表示となります。一方、vertical-rlという値を設定すると、テキストは垂直方向に配置され、行は右から左へと進む、日本語の縦書きでよく見られる表示を実現できます。また、vertical-lrを設定すると、テキストは垂直方向に配置され、行は左から右へと進む表示になります。

このプロパティは、コンテンツの国際化対応や、伝統的な書式をWeb上で忠実に再現する上で非常に重要な役割を果たします。これにより、ユーザーにとって自然な読書体験を提供し、ウェブコンテンツのアクセシビリティと視覚的な整合性を向上させることが可能になります。

Copy
1selector {
2  writing-mode: vertical-rl;
3}

引数なし

引数はありません

戻り値なし

戻り値はありません