【CSS Modules】inset-inline-endプロパティの使い方
inset-inline-endプロパティの使い方について、初心者にもわかりやすく解説します。
基本的な使い方
inset-inline-endプロパティは、要素のインライン方向の終わり側からの距離、つまり要素の内側へのオフセットを保持するプロパティです。このプロパティは、CSS論理プロパティの一つであり、物理的な方向（例えば、右や左といった固定された方向）ではなく、ウェブページの書字方向（テキストが流れる方向）に基づいて要素の配置を調整します。
具体的には、positionプロパティがabsolute、relative、fixed、またはstickyに設定された要素に対して、そのボックスの終わり側が親要素や包含ブロックの終わり側からどのくらい離れるべきかを定義します。従来のCSSではrightプロパティが使われる場面に相当しますが、inset-inline-endは、ウェブページの言語設定や書字モード（例えば、左から右へ書く言語や右から左へ書く言語）に応じて自動的に適切な物理方向へと対応が切り替わります。
これにより、異なる言語や地域に対応する国際化されたウェブサイトを構築する際に、物理プロパティを一つずつ調整する手間を省き、より柔軟で保守性の高いCSS記述が可能になります。指定できる値としては、pxやemなどの長さの単位、親要素に対するパーセンテージ、またはautoがあります。このプロパティを理解し活用することで、グローバルなウェブコンテンツ開発において、一貫性のあるレイアウトを効率的に実現できるようになります。
構文(syntax)
1selector { 2 inset-inline-end: 10px; 3}
引数(parameters)
引数なし
引数はありません
戻り値(return)
auto | <length> | <percentage>
inset-inline-end プロパティは、要素のインライン終了側からのオフセットを指定します。指定できる値は、自動計算される auto、固定の長さを示す <length>、または親要素に対する比率で指定する <percentage> です。