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

inset-block-endプロパティは、要素の包含ブロックに対するブロックフロー方向の末尾からのオフセット距離を保持するプロパティです。このプロパティは、CSS論理プロパティおよび値モジュールで定義されており、コンテンツの書字方向（writing-mode）やテキストの向きに応じて物理的な位置が変化する柔軟なレイアウトを可能にします。

具体的には、一般的な横書き（writing-mode: horizontal-tb）のドキュメントでは、物理的なbottomプロパティと等価に機能し、要素を下端からどれだけ内側に配置するかを指定します。しかし、縦書き（例えばwriting-mode: vertical-rl）のドキュメントでは、物理的なleftプロパティに相当するなど、書字方向に応じて自動的に対応する物理的な辺が決定されます。これにより、多言語対応サイトなどで、書字方向が変わっても常に「ブロックの末尾」という論理的な概念で一貫したレイアウトを維持できます。

設定できる値は、10pxのような長さを示す<length>、5%のような包含ブロックに対する割合を示す<percentage>、そして自動的な値を意味するautoなどがあります。autoは、初期値として、または他の制約に基づいてブラウザがオフセットを自動計算する場合に使用されます。このプロパティは、insetショートハンドプロパティの一部でもあり、他の論理的なインセットプロパティ（inset-block-start、inset-inline-start、inset-inline-end）と組み合わせて使用することで、より簡潔に要素の四方からのオフセットを定義できます。国際化対応のウェブサイトやアプリケーションを開発する際に、物理プロパティの代わりに論理プロパティを使用することは、保守性と適応性を高める上で非常に有効です。

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

引数なし

引数はありません

戻り値なし

戻り値はありません