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

border-inline-widthプロパティは、要素のインライン方向における境界線の幅を設定するプロパティです。インライン方向とは、テキストの記述方向（書字方向）に沿った方向を指します。例えば、日本語のように左から右へ横書きで記述される言語の場合、インライン方向は左右を意味します。一方、縦書き言語やアラビア語のように右から左へ記述される言語では、インライン方向がそれぞれ上下や左右の逆方向を意味します。このプロパティを使用することで、CSSの論理プロパティの概念に基づき、書字方向が変わっても適切な境界線の幅が適用されるため、多言語対応のウェブサイトや柔軟なレイアウトの構築に役立ちます。

このプロパティは、border-inline-start-widthとborder-inline-end-widthという二つのプロパティのショートハンド（一括指定）として機能します。これにより、インライン方向の開始側と終了側の両方の境界線の幅を一度に指定でき、コードをより簡潔に記述することが可能です。設定できる値には、thin、medium、thickといったキーワードや、px、em、remなどの長さ単位があります。例えば、border-inline-width: 2px;と指定すると、インライン方向の境界線の幅が2ピクセルに設定されます。従来のborder-left-widthやborder-right-widthといった物理的なプロパティとは異なり、書字方向の変化に自動的に対応できるため、グローバルなウェブコンテンツのスタイル管理において非常に強力なツールとなります。ウェブデザインにおける柔軟性と保守性を高めるために、このプロパティは重要な役割を担っています。

Copy
1.element {
2  border-inline-width: medium;
3}

引数なし

引数はありません

戻り値なし

戻り値はありません