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

inset-block-startプロパティは、CSSレイアウトにおいて、ブロック軸の開始位置からの内側のオフセット（インセット）を保持するプロパティです。このプロパティは、要素の配置を制御する論理プロパティの一つであり、国際化や多言語対応のウェブサイトを構築する際に非常に重要な役割を果たします。従来の物理的なプロパティであるtop、right、bottom、leftが常に画面上の絶対的な位置を示すのに対し、inset-block-startは文書の書字方向（writing-mode）やテキストの向き（direction）に依存してその意味が変化します。

例えば、多くの言語で見られる左から右、上から下への書字方向の場合、inset-block-startはtopプロパティと同じ挙動を示します。しかし、アラビア語のような右から左への書字方向の場合でも、inset-block-startはブロックの開始位置（この場合は上端）からのオフセットを適切に設定します。これにより、開発者は言語や地域に依存しない、より柔軟で保守しやすいスタイルを記述できるようになります。

このプロパティは、positionプロパティがabsolute、relative、fixed、stickyなどに設定されている要素に対して適用され、その要素のブロック軸の開始位置をどれだけ内側にずらすかを指定します。値としては、pxやemなどの具体的な長さの単位、親要素に対する%、またはブラウザが自動的に決定するautoなどを設定できます。inset-block-startを理解し活用することで、様々な言語や文化圏のユーザーに対して一貫したユーザーエクスペリエンスを提供できるレスポンシブなデザインを効率的に実装することが可能になります。

Copy
1.selector {
2  inset-block-start: 10px;
3}

引数なし

引数はありません

戻り値なし

戻り値はありません