CSS

Sets how far an element sits from the “end” side of the text flow, automatically switching between right/left or top/bottom based on the writing direction.

inset-inline-end

• これって何？
• いつ使う？
• 使い方の最短メモ
• よくあるつまずき
• いっしょに覚えると楽

これって何？

inset-inline-end は、文字が流れる向きの「終わり側」から、要素をどれだけ離すかを指定するプロパティです。

「終わり側」って？――横書きの英語（左→右）なら“右端”、アラビア語（右→左）なら“左端”。縦書きだと上下が入れ替わります。つまり、言語や書字方向に合わせて“右/左（または上/下）を自動で切り替えてくれる位置指定です。

いつ使う？

• レイアウトを多言語対応にしたい（LTR/RTL/縦書き）
• 右か左かを固定したくない（論理方向で安全に置きたい）
• position を使ったパーツ（バッジ、ツールチップ、モーダルの×ボタンなど）を、終わり側にピタッと寄せたい

使い方の最短メモ

効くのは position が relative / absolute / fixed / sticky のとき

デフォルト値は auto。数値や長さ、calc() などが指定できます。

/* 例：カードの右上（LTR）/左上（RTL）にバッジを寄せる */
.card {
	position: relative;
}
.badge {
	position: absolute;
	inset-block-start: 8px;   /* 上（書字方向に依存しない「ブロックの先頭」） */
	inset-inline-end: 8px;    /* 終わり側（LTRだと右、RTLだと左） */
}

LTR（英語など）では右寄せ、RTL（アラビア語など）では左寄せに自動で切り替わります。

よくあるつまずき

動かない？

position が static（初期値）のままだと効きません。relative 以上にする。

物理プロパティと混ぜない

right/left と inset-inline-* を同時に書くと分かりづらく、カスケードの勝ち負け次第になります。論理で統一が吉。

両端を同時に指定（inset-inline-start も inset-inline-end も）

• width:auto なら「その間に引き伸ばす」挙動に
• width を固定していると、もう一方の値・他指定との兼ね合いで決まります（レイアウトが窮屈になりやすいので慎重に）

いっしょに覚えると楽

横方向まとめ

inset-inline（start/end のペア）

縦方向

inset-block-start / inset-block-end、ペアは inset-block

物理版（書字に依存しない固定方向）

top/right/bottom/left

ぜんぶまとめて

inset（※これは物理の top/right/bottom/left のショートハンド）