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

border-inline-start-widthプロパティは、要素のインライン開始方向の境界線の幅を設定するために使用されるプロパティです。

このプロパティは、物理的な位置（例えば、常に左側や常に右側）を指定するのではなく、現在の書字方向（writing-modeプロパティやdirectionプロパティによって定義される）に基づいて、テキストの読み書きが始まる側の境界線を指します。具体的には、日本語や英語のように左から右へ文字が進む書字モードの場合、このプロパティは要素の左側の境界線の幅を制御します。一方、アラビア語やヘブライ語のように右から左へ文字が進む書字モードの場合、要素の右側の境界線の幅を制御します。このように、書字方向に応じて物理的な位置が自動的に決定されるため、国際化対応において非常に有用です。

設定できる値としては、thin（細い）、medium（中くらい）、thick（太い）といった事前定義されたキーワードや、px（ピクセル）、em（要素のフォントサイズに基づく単位）、rem（ルート要素のフォントサイズに基づく単位）などの単位を用いた具体的な長さの値を指定できます。初期値はmediumです。

このプロパティは、border-widthショートハンドプロパティの一部であり、より具体的には、border-inline-startショートハンドプロパティを使って、インライン開始方向の境界線のスタイル、幅、色をまとめて設定することも可能です。Webページのデザインにおいて、特定の方向にだけ異なる境界線幅を適用したい場合や、多言語対応でデザインの一貫性を保ちたい場合に活用されます。

Copy
1selector {
2  border-inline-start-width: medium;
3}

引数なし

引数はありません

戻り値なし

戻り値はありません