direction
Baseline
Widely available
*
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015年7月.
* Some parts of this feature may have varying levels of support.
警告:
作成者は可能な限り direction CSS プロパティの使用を避け、代わりに HTML の dir グローバル属性を使用することを推奨します。
direction は CSS のプロパティで、テキスト、表やグリッドの列、水平方向のはみ出し方向を設定します。右書きの言語（ヘブライ語やアラビア語など）では rtl を、左書きの言語（英語やそれ以外の多くの言語）では ltr を使います。
なお、テキストの方向はふつうは文書内で（例えば HTML の dir 属性 で）定義するものであり、 direction プロパティ直接使用して行うものではありません。
試してみましょう
direction: ltr;
direction: rtl;
<section class="default-example" id="default-example">
<div class="transition-all" id="example-element">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
</section>
#example-element {
border: 1px solid #c5c5c5;
padding: 0.75em;
width: 80%;
max-height: 300px;
display: flex;
}
#example-element > div {
background-color: rgb(0 0 255 / 0.2);
border: 3px solid blue;
margin: 10px;
flex: 1;
}
構文
/* キーワード値 */
direction: ltr;
direction: rtl;
/* グローバル値 */
direction: inherit;
direction: initial;
direction: revert;
direction: revert-layer;
direction: unset;
値
インラインレベル要素で direction プロパティに効果を持たせたいときは、unicode-bidi プロパティの値が embed もしくは override である必要があります。
解説
このプロパティは、ブロックレベル要素のテキストの基本的な方向と、unicode-bidi プロパティで作られた埋め込み (embeddings) の方向を設定します。また、テキストやブロックレベル要素のデフォルトの文字揃えや、表やグリッドの行内にセルが流れる方向を決めます。
HTML の dir 属性とは異なり、direction プロパティは表の列から表のセルには継承されません。これは CSS の継承が文書ツリーに従うためで、表のセルは表の列の中ではなく、行の中にあるからです。
direction プロパティと unicode-bidi プロパティのみが、 all 一括指定プロパティの影響を受けません。
公式定義
| 初期値 | ltr |
|---|---|
| 適用対象 | すべての要素 |
| 継承 | あり |
| 計算値 | 指定通り |
| アニメーションの種類 | アニメーション不可 |
形式文法
direction =
ltr |
rtl
例
右書きの方向を設定
以下の例では、 2 つのテキストがあり、どちらも direction: rtl を使って表示されています。アラビア語のテキストはこの設定で正しく表示されますが、日本語のテキストは句点が異常な位置に表示されるようになりました。
blockquote {
direction: rtl;
width: 300px;
}
<blockquote>
<p>この段落は日本語ですが、間違って右から左へ書かれています。</p>
<p></p>
</blockquote>
<blockquote>
<p>هذه الفقرة باللغة العربية ، لذا يجب الانتقال من اليمين إلى اليسار.</p>
<p></p>
</blockquote>
仕様書
| Specification |
|---|
| CSS Writing Modes Level 4 # direction |
| Scalable Vector Graphics (SVG) 2 # DirectionProperty |
ブラウザーの互換性
関連情報
unicode-bidiwriting-mode- SVG の
direction属性 - HTML の
dirグローバル属性 - 垂直フォームコントロールの作成
- テキストの様々な方向の扱い