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

border-block-styleプロパティは、要素の論理的なブロック方向の開始側と終了側の境界線（ボーダー）のスタイルを保持するプロパティです。このプロパティはCSS Logical Properties and Values Moduleの一部であり、テキストの書字方向（横書きか縦書きか、左から右か右から左かなど）に依存しない形で要素の境界線スタイルを定義するために利用されます。

具体的には、英語などの横書きの左から右へ書く言語環境では、border-block-styleは要素の上下の境界線スタイルを設定します。一方、日本語の縦書きのような環境では、要素の左右の境界線スタイルを制御することになります。このように、書字モードによって境界線の物理的な位置が自動的に調整されるため、国際化されたWebサイトや多言語コンテンツのレイアウトをより柔軟に、かつ効率的に設計できます。

設定できる値には、境界線を非表示にするnone、完全に隠すhidden、点線にするdotted、破線にするdashed、実線にするsolid、二重線にするdouble、立体的にへこんだようなgroove、盛り上がったようなridge、埋め込まれたようなinset、浮き出たようなoutsetなどがあり、これらのキーワードを指定することで様々な視覚効果を表現できます。

border-block-styleは、border-block-start-styleとborder-block-end-styleという二つの論理プロパティを一度に設定するためのショートハンドプロパティとしても機能します。このプロパティを理解し活用することで、物理的な方向（例: border-top-styleやborder-bottom-style）に直接依存する従来の指定方法よりも、より適応性が高く、将来の変更に強いWebデザインを実現できるようになります。

Copy
1border-block-style: solid;

引数なし

引数はありません

戻り値なし

戻り値はありません