【CSS Modules】border-block-colorプロパティの使い方
border-block-colorプロパティの使い方について、初心者にもわかりやすく解説します。
作成日: 更新日:
基本的な使い方
border-block-colorプロパティは、要素のブロックの論理的な開始方向および終了方向の境界線の色を保持するプロパティです。これは、物理的な上下左右といった固定された方向ではなく、現在の書字方向（writing-mode）やテキストの進行方向（directionプロパティ）に基づいて、ブロックの始まりと終わりにあたる境界線の色を決定する「論理プロパティ」に分類されます。
具体的には、テキストの流れに対して垂直な軸にある境界線の色を一括で指定します。例えば、日本語のような横書きの文書では上と下の境界線に、縦書きの文書では左と右の境界線に、このプロパティで指定した色が適用されます。この特性により、多言語対応サイトや、レイアウトの向きが動的に変わるコンポーネントにおいて、コンテンツの論理的な始まりと終わりを示す境界線に、常に意図した色を一貫して適用できます。これは、デザインの柔軟性と国際化対応を両立させる上で非常に有用です。
設定できる値は、CSSで利用可能なあらゆる<color>値です。redのようなキーワード、#FF0000のような16進数コード、rgb(255, 0, 0)のようなRGB値などが利用できます。また、このプロパティは、border-block-start-colorとborder-block-end-colorの二つのプロパティをまとめて設定するショートハンドとしても機能します。
公式リファレンス: border-block-color
構文(syntax)
1element { 2 border-block-color: red; 3}
引数(parameters)
引数なし
引数はありません
戻り値(return)
戻り値なし
戻り値はありません