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

border-inline-end-widthプロパティは、要素の論理的なインライン終了側の境界線（ボーダー）の太さを保持するプロパティです。このプロパティは、ウェブページのレイアウトにおいて、特定の要素の境界線幅を制御するために使用されます。

「論理的なインライン終了側」とは、テキストが書かれる方向の末尾側を指します。例えば、日本語のように一般的に左から右へテキストが進む言語環境では、border-inline-end-widthプロパティは要素の右側の境界線の太さを設定します。しかし、アラビア語のように右から左へテキストが進む言語環境の場合、このプロパティは要素の左側の境界線の太さを制御することになります。このように、物理的な左右の位置に固定されず、テキストの書き込み方向や言語設定（writing-modeやdirectionプロパティ）によって柔軟に適用される点が特徴です。

このプロパティの大きな利点は、国際化対応されたウェブサイトを構築する際に、より少ない労力で一貫したデザインを実現できる点にあります。従来のborder-right-widthやborder-left-widthといった物理的な方向を指定するプロパティとは異なり、言語や文化圏ごとのテキストの進行方向の変化に自動的に対応するため、コードの保守性や再利用性が向上します。

境界線の太さの指定には、thin（細い）、medium（中程度）、thick（太い）といったキーワード値を使用できるほか、px（ピクセル）、em（エム）、rem（ルートエム）などの単位を用いた具体的な数値（例: 3px）を設定することも可能です。これらの値を適切に設定することで、要素間の視覚的な区切りを明確にしたり、特定の情報を強調したりするなど、多様なデザイン表現に役立てることができます。

Copy
1div {
2  border-inline-end-width: 1px;
3}

引数なし

引数はありません

戻り値なし

戻り値はありません