【CSS Modules】inset-inline省略形プロパティの使い方

inset-inlineプロパティは、CSSにおける要素のインライン方向の配置を制御するために使用されるショートハンドプロパティです。これは、要素の論理的な開始側と終了側のオフセット値をまとめて設定する役割を担います。

「論理的な」とは、特定の物理的な方向（例：画面上の左や右）ではなく、コンテンツの書字方向（writing-modeやdirectionプロパティによって定義される文字の流れる方向）に依存して、要素の位置が決定されることを意味します。そのため、文書の書字モードが変更されても、要素の相対的な配置を意図した通りに保つことができます。

具体的には、inset-inlineプロパティは、inset-inline-startプロパティとinset-inline-endプロパティのショートハンドです。これらのプロパティは、要素のインライン方向の開始エッジからと終了エッジからの距離を定義します。例えば、左から右へ文字が進む書字方向の環境では、inset-inline-startは左端、inset-inline-endは右端に対応します。一方、右から左へ文字が進む書字方向では、inset-inline-startは右端、inset-inline-endは左端に対応するよう自動的に調整されます。

このプロパティは、多言語対応のウェブサイトや、様々な書字方向を持つコンテンツを扱う際に、レイアウトの柔軟性と保守性を高めるために特に有効です。通常、positionプロパティがabsolute、relative、fixed、またはstickyに設定されている要素に対して適用され、その位置を調整します。これにより、物理的なプロパティを直接指定するよりも、より直感的で国際化に対応したスタイル設定が可能になります。

Copy
1selector {
2  inset-inline: 10px;
3}

引数なし

引数はありません

戻り値なし

戻り値はありません