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

border-block-endプロパティは、要素のブロックフローの末尾側に表示される境界線（ボーダー）の幅、スタイル、色を一括で設定するプロパティです。

このプロパティはCSSの論理プロパティの一つであり、物理的な方向である「下」といった位置を固定するのではなく、コンテンツの書字方向（writing-mode）やテキストの向き（direction）に基づいて境界線の位置を決定します。例えば、左から右へ書かれる横書きのテキスト（日本語など）では、このプロパティは要素の下側の境界線として機能します。一方、上から下へ書かれる縦書きのテキストでは、要素の右側の境界線として機能することになります。

border-block-endはショートハンドプロパティであり、border-block-end-width（境界線の幅）、border-block-end-style（境界線のスタイル）、border-block-end-color（境界線の色）の三つの個別プロパティを一度に設定できます。これらの値は半角スペースで区切って記述し、例えば2px solid blueのように、幅、スタイル、色の順で指定します。値を省略した場合、それぞれの個別プロパティの初期値が適用されます。

このプロパティを使用することで、異なる言語や書字方向を持つウェブページでも、常に適切な位置に境界線を表示させることが可能となり、国際化対応や柔軟なレイアウト設計に大きく貢献します。物理的な方向ではなく論理的な方向でデザインを考えることで、より汎用性の高いスタイルを実装することができます。

Copy
1border-block-end: 1px solid #ccc;

引数なし

引数はありません

戻り値なし

戻り値はありません