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

border-block-start-colorプロパティは、要素のブロックの開始側にある境界線の色を保持するプロパティです。このプロパティは、CSSの論理プロパティおよびフロー相対プロパティの一つであり、テキストの書字方向（文字が書かれる方向）や書字モード（横書きか縦書きか）に応じて、境界線の物理的な位置が動的に変化する特徴を持っています。

具体的には、一般的な横書きの言語（例えば英語や日本語の横書き）で左から右へ書き進む場合、このプロパティは要素の上側の境界線の色を設定します。しかし、もし書字方向が右から左へ書き進む言語環境（例えばアラビア語）や、Webページ全体が縦書きモードに設定されている場合、「ブロックの開始側」が指す物理的な方向はそれぞれ右側や上側など、書字方向の「開始」にあたる側へと自動的に調整されます。

このため、border-top-colorやborder-right-colorといった物理的な方向を直接指定するプロパティとは異なり、border-block-start-colorは、多言語サイトや国際化されたWebアプリケーションにおいて、どの書字モードでも一貫したデザインとレイアウトを保つために非常に有用です。開発者は書字方向ごとに異なるスタイルを記述する必要がなくなり、スタイルの保守性と柔軟性が向上します。

このプロパティには、CSSの色を定義する様々な値を指定できます。例えば、redのような色のキーワード、#FF0000のような16進数表記、rgb(255, 0, 0)のようなRGB関数などを用いて、目的の境界線の色を設定することが可能です。初期値はcurrentcolorで、これは要素のテキストの色と同じ色を意味します。

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

引数なし

引数はありません

戻り値なし

戻り値はありません