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

inset-blockプロパティは、要素のブロック方向の開始位置と終了位置に関するインセット値を保持するプロパティです。このプロパティは、これら二つの値を一括で設定するショートハンドとして機能し、要素の周囲に論理的なインセット（内側のオフセット）を適用することで、要素のサイズと位置を定義します。具体的には、inset-block-start プロパティと inset-block-end プロパティをまとめて設定する役割を持ちます。

ここでいう「ブロック方向」とは、CSSの論理プロパティにおける概念で、テキストが書かれる方向（フローの方向）を指します。例えば、一般的な横書きの言語（日本語、英語など）では上から下へ、縦書きの言語では右から左へ、といった具合に writing-mode プロパティによって定義されます。したがって、inset-block-start はブロック方向の開始辺、inset-block-end はブロック方向の終了辺に相当します。物理的なプロパティである top と bottom に相当することが多いですが、writing-mode の設定によっては異なる場合があります。

値の指定方法としては、以下の2通りがあります。まず、単一の値を指定した場合、その値は inset-block-start と inset-block-end の両方に適用されます。次に、2つの値を指定した場合、1つ目の値が inset-block-start に、2つ目の値が inset-block-end にそれぞれ適用されます。

このプロパティの主な利点は、国際化対応されたウェブサイトを構築する際にあります。異なる言語や文化圏では、テキストの書き込み方向が異なるため、物理的な top や bottom を使用すると、言語ごとにCSSを調整する必要が生じます。inset-block を使用することで、writing-mode の変更に自動的に適応し、一貫したレイアウトを保つことができ、保守性と再利用性の高いCSSコードを実現します。このプロパティは、通常、position プロパティが static 以外の値を持つ要素に対して効果を発揮します。

Copy
1inset-block: 20px;

引数なし

引数はありません

戻り値なし

戻り値はありません