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

border-block-startプロパティは、要素の論理的なブロック開始側の境界線（ボーダー）に関する幅、スタイル、色をまとめて設定するためのCSS省略形プロパティです。このプロパティは、物理的な上・下・左・右といった方向ではなく、テキストの書字方向（writing-mode）に基づいて要素のブロックの開始位置を決定します。

具体的には、通常の横書きのテキスト（例えば英語や日本語の多く）では、ブロックの開始側は上辺を指します。しかし、縦書きのテキスト（例えば伝統的な日本語や中国語）では、ブロックの開始側は左辺となるのが一般的です。border-block-startプロパティを使用することで、書字方向が異なる場合でも、常にブロックの開始位置に一貫したボーダーを適用できるため、国際化対応や多様なレイアウトの設計において非常に有用です。

このプロパティは、border-block-start-width（境界線の太さ）、border-block-start-style（境界線の種類）、border-block-start-color（境界線の色）の三つのプロパティの値を、スペース区切りで一度に指定することができます。これにより、CSSコードをより簡潔かつ読みやすく保ち、記述の冗長性を避けることが可能です。各値は、幅には長さを示す単位やキーワード（例: 1px, medium）、スタイルには線の種類（例: solid, dotted）、色には色の名前やHEXコード（例: red, #336699）などを指定します。一部の値を省略した場合、その省略されたプロパティには初期値が適用されます。

Copy
1border-block-start: 1px solid black;

引数なし

引数はありません

戻り値なし

戻り値はありません