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

border-block-end-colorプロパティは、要素のブロックフロー方向における「終わり」側のボーダーの色を保持するプロパティです。このプロパティはCSS論理プロパティの一つであり、テキストの書字方向（writing-mode）やテキストの進行方向（direction）に応じて、その物理的な位置が変化します。

具体的には、例えば横書き（左から右）の日本語や英語では、ブロックの終わりは下側になるため、border-bottom-color と同じ効果を持ちます。しかし、縦書きの言語（例えば日本語の縦書き）では、ブロックの終わりは右側になることが多く、この場合 border-right-color と同じように動作します。このように、物理的な上下左右ではなく、コンテンツの論理的な流れに基づいてボーダーの色を設定するため、多言語対応のWebサイトや、柔軟なレイアウト変更が求められる場面で非常に役立ちます。

このプロパティには、色を表す様々な値を指定できます。例えば、キーワード（red, blue など）、HEXコード（#RRGGBB 形式）、RGB関数（rgb(R, G, B) 形式）、HSL関数（hsl(H, S, L) 形式）などがあります。また、currentcolor キーワードを指定すると、要素のテキスト色と同じ色をボーダーに適用できます。

border-block-end-color は、border-block-end というショートハンドプロパティの一部でもあります。また、ブロックの始まり側の色を設定する border-block-start-color や、インライン方向の始まり・終わりを設定する border-inline-start-color、border-inline-end-color など、他の論理的なボーダー関連プロパティと組み合わせて使用することで、より一貫性のあるデザインを効率的に実現できます。このプロパティを理解することは、現代のWebデザインにおいて、多様な書字モードや国際化に対応した柔軟なレイアウトを構築する上で重要です。

Copy
1border-block-end-color: red;

引数なし

引数はありません

戻り値なし

戻り値はありません