CSS
この記事では「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() などが指定できます。
CSS
/* 例：カードの右上（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のショートハンド）