CSS inset-inline-start 属性

定义和用法

inset-inline-start 属性を指定する必要があります。この属性は、要素の行方向上の始端と親要素の間の距離を設定します。

注意：この属性が効果を発揮するためには、 position 属性と非常によく似ています。

CSSの inset-inline および inset-block 属性はCSSの top、bottom、left および right 属性は非常に似ていますが、 inset-block および inset-inline 属性はブロック方向と行方向に依存しています。

注意：関連するCSS属性に影響を与えます。 writing-mode および direction 行方向を定義します。これは、要素の行方向上の始端位置および inset-inline-start 属性の結果。英語のページでは、行方向は左から右、ブロック方向は下になります。

例

例1

既に配置されたdiv要素の行方向上の始端と親要素の間の距離を設定します：

div {
  inset-inline-start: 50px;
}

自分で試してみてください

例2

div要素の writing-mode 属性値がvertical-rlに設定された場合、行方向は下になります。結果として、要素の始端は左側から上に移動します：

div {
  inset-inline-start: 50px;
  writing-mode: vertical-rl;
}

自分で試してみてください

例3

div要素の direction 属性値がrtlに設定された場合、行方向は右から左になります。ここには小さなミスがありますが、「結果は、要素の始端が右側に固定されます（なぜなら、rtlの場合、始端は既に右側ですが、デフォルトのltrレイアウトに対して全体が反転しているためです）」と書くべきです：

div {
  inset-inline-start: 50px;
  direction: rtl;
}

自分で試してみてください

CSS 文法

inset-inline-start: auto|length|initial|inherit;

属性値

技術的詳細

ブラウザのサポート

テーブルの数字は、この属性を完全にサポートする最初のブラウザのバージョンを示しています。

関連ページ

チュートリアル：CSS 定位

参照：CSS position 属性

参照：CSS direction 属性

参照：CSS writing-mode 属性