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

inset-inline-startプロパティは、CSSにおいて、ブロック要素のインライン方向における開始位置からのオフセット距離を保持するプロパティです。このプロパティは、従来の物理的な位置指定プロパティであるleftやrightとは異なり、文書の書字方向（テキストが書かれる向き）に依存してその意味が変化する「論理プロパティ」の一つです。

具体的には、書字方向が左から右（例えば日本語や英語）である場合、inset-inline-startは要素の左端から内側へのオフセット距離として機能します。一方、書字方向が右から左（例えばアラビア語やヘブライ語）である場合、このプロパティは要素の右端から内側へのオフセット距離として機能します。このように、物理的な左右に固定されず、常に「文章の始まり」からの位置を基準とするため、多言語対応やレイアウトの柔軟性を高める上で非常に重要です。

このプロパティに設定できる値は、pxやemなどの具体的な長さ、親要素に対する%（パーセンテージ）、または自動で位置を調整するautoです。top、right、bottom、leftといった物理的なプロパティと組み合わせて使用するのではなく、inset-block-start、inset-block-end、inset-inline-endといった他の論理プロパティと合わせて使用することで、グローバルな書字方向の変化に動的に対応できるレスポンシブなレイアウト設計が可能となります。国際的なウェブサイト開発において、物理的な指定に頼らず論理的な指定を用いることで、異なる文化圏のユーザーにも適切な表示を提供できるのです。

Copy
1inset-inline-start: <length> | <percentage> | auto;

引数なし

引数はありません

戻り値なし

戻り値はありません