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

border-inline-end-colorプロパティは、CSSの論理プロパティの一つで、要素のインライン方向の終了側に表示される境界線の色を保持するプロパティです。このプロパティは、テキストの書字方向（writing-mode）やテキストの方向（direction）に依存して、適用される物理的な辺が変わる特徴を持っています。例えば、日本語のように左から右へ書く横書きのテキストの場合、インライン終了方向は通常、要素の右端に相当します。しかし、アラビア語のように右から左へ書くテキストの場合、インライン終了方向は要素の左端に相当します。また、縦書きのテキストでは、通常、要素の下端に相当します。

このプロパティは、border-inline-end-width（境界線の太さ）やborder-inline-end-style（境界線の種類）といった他の論理プロパティと組み合わせて使用することで、インライン終了方向の境界線の見た目全体を制御できます。これらの個別のプロパティをまとめて設定するためのショートハンドプロパティとしてborder-inline-endも存在します。

border-inline-end-colorプロパティには、redや#FF0000のような標準的な色キーワード、RGB値、HEX値、HSL値などを指定できます。また、currentcolorキーワードを指定することで、要素のcolorプロパティの値と同じ色を境界線に適用することも可能です。このプロパティを使用することで、国際化されたWebサイトや多言語サイトにおいて、書字方向に応じて自動的に境界線の位置を調整でき、より柔軟で保守性の高いスタイル定義を実現できます。物理的なborder-right-colorやborder-bottom-colorといったプロパティと異なり、論理的な方向で境界線を指定するため、コンテンツの書字方向が変わってもCSSの記述を変更する必要がありません。

Copy
1selector {
2  border-inline-end-color: red;
3}

引数なし

引数はありません

戻り値なし

戻り値はありません