【CSS】direction - 水平方向

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

検証環境

CSS

macOS

14.1

direction

directionは“水平方向”のプロパティです。

direction: 値;

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

値	意味
ltr	右方向（左から右へ）
rtl	左方向（右から左へ）

directionプロパティの値をltrに設定すると、テキストは右方向（左から右）に配置されます。

sample.html

<style>
p {
    ___ih_hl_start
    direction: ltr;
    ___ih_hl_end
}
</style>

<p>CSS : Cascading Style Sheets</p>

プレビュー

directionプロパティの値をrtlに設定すると、テキストは左方向（右から左）に配置されます。

sample.html

<style>
p {
    ___ih_hl_start
    direction: rtl;
    ___ih_hl_end
}
</style>

<p>CSS : Cascading Style Sheets</p>

プレビュー