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

border-block-start-widthプロパティは、要素のブロックフローの開始側に位置する境界線の幅を保持するプロパティです。このプロパティは、Webコンテンツの国際化や、様々な書き込みモード（例: 横書き、縦書き、右から左書きなど）に対応するため導入されたCSS論理プロパティの一つです。

従来のborder-top-widthのような物理的な方向を指定するプロパティとは異なり、border-block-start-widthは、テキストの記述方向や表示モードに応じて、物理的な位置が自動的に調整されます。これにより、どの言語やレイアウトにおいても「ブロックの開始側」という概念が常に保たれ、一貫したユーザーインターフェースのデザインと実装が可能になります。

例えば、一般的な横書きで左から右へ読む言語（writing-mode: horizontal-tb; direction: ltr;）のウェブページでは、このプロパティは要素の上側の境界線の幅を制御し、border-top-widthと同じ挙動を示します。しかし、日本語の縦書きモード（writing-mode: vertical-rl;）では、要素の右側の境界線の幅を制御することになります。このように、表示される言語や方向が変わっても、論理的な「開始」の位置に常に境界線が描画されるため、グローバルな対応が容易になります。

このプロパティには、thin、medium、thickといったキーワード値や、1px、0.5emなどの具体的な長さの値を指定することができます。値が指定されない場合の初期値はmediumです。border-block-start-widthプロパティは、border-widthショートハンドプロパティの一部でもあり、他の論理的な境界線プロパティと組み合わせて使用することで、柔軟なレイアウト構築に貢献します。

Copy
1.element {
2  border-block-start-width: 2px;
3}

引数なし

引数はありません

戻り値なし

戻り値はありません