CSS

A keyword that automatically sets margins or positions on the line’s ending side, adapting naturally to the text direction of each language.

inline-end

文字が流れる向きを基準に、「行の終わり側(右や左)」を自動で判断して位置や余白をつけられるキーワード。

英語でもアラビア語でも、言語に合わせて自然に見た目を調整できる。

inline-end とは?

inline-end は、テキストの「行の終わり側」を指すためのキーワードです。

これを使うと、左から右に書く言語(英語や日本語など)でも、右から左に書く言語(アラビア語など)でも、自然にその言語の“行の終わり側”を指定できます。

つまり、「右端」や「左端」といった“見た目の方向”ではなく、“書く方向”を基準にして位置を決めるための考え方です。

たとえば、ある要素の右側に余白をつけたいとき、英語のように左→右の言語なら右側になりますが、アラビア語のように右→左の言語では左側になります。

そんなとき、margin-inline-end を使えば、言語の向きが変わっても自動で正しい側に余白をつけてくれます。

こうすることで、国や言語が違ってもCSSを書き直す必要がなくなり、国際対応がしやすくなります。

サンプルコード

CSS

.box {
    margin-inline-end: 20px;
}

この例では、「行の終わり側」に20pxの余白がつきます。

英語のページなら右側に、アラビア語のページなら左側に余白がつくという動きをします。

このように、inline-end は「左右」ではなく「行方向の終わり」を意味する柔軟な指定方法です。