【CSS Modules】directionプロパティの使い方
directionプロパティの使い方について、初心者にもわかりやすく解説します。
作成日: 更新日:
基本的な使い方
directionプロパティは、ブロックレベル要素内のテキストの基本記述方向や、その他様々な視覚要素の流れる方向を保持するプロパティです。このプロパティは、主に異なる言語の記述方向に対応するために使用されます。
指定できる主な値は二つあります。一つは「ltr」（left-to-right）で、これはテキストが左から右へ流れる標準的な方向を示します。日本語や英語など、多くの言語で一般的に使われる記述方向です。もう一つは「rtl」（right-to-left）で、テキストが右から左へ流れる方向を示します。アラビア語やヘブライ語などの言語で採用されており、これらの言語のコンテンツをウェブページに表示する際に非常に重要となります。
directionプロパティは、単にテキストの表示方向を決定するだけでなく、ウェブページ全体のレイアウトにも影響を与えます。具体的には、テーブルの列が並ぶ順序、水平方向のオーバーフローが発生した際のスクロールバーの初期位置、リストアイテムのマーカー（箇条書きの記号など）の配置、さらにはブロックレベル要素のフロートの方向などにも関わってきます。
このプロパティを適切に設定することで、多言語に対応したウェブサイトを構築する際に、各言語の自然な読み書きの方向性を尊重し、コンテンツが正しく、かつ読みやすく表示されることを保証できます。国際化対応（I18n）を進める上で、directionプロパティの理解と適切な利用は欠かせない要素の一つです。
公式リファレンス: direction
構文(syntax)
1.element { 2 direction: ltr; 3}
引数(parameters)
引数なし
引数はありません
戻り値(return)
戻り値なし
戻り値はありません