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

border-inline-endプロパティは、要素のインライン方向の末尾側に適用されるボーダーの幅、スタイル、色を一括して保持するプロパティです。このプロパティは、CSSの論理プロパティおよび値モジュールで定義されており、従来の物理的な方向（例: border-rightやborder-bottom）に依存せず、ドキュメントの書き込みモードやテキストの方向性に基づいてボーダーの位置を決定します。

具体的には、Webページのテキストが左から右へ流れる一般的な言語環境（例: 日本語や英語の横書き）では、このプロパティは要素の右側のボーダーとして機能します。しかし、アラビア語のようにテキストが右から左へ流れる言語環境では、要素の左側のボーダーとして解釈されます。さらに、縦書きモードが設定されている場合には、テキストの進行方向の末尾、つまり物理的な下側または上側にボーダーが表示されます。

この論理的なアプローチにより、開発者は言語や地域設定に依存しない、より柔軟で国際化に対応しやすいスタイルを記述できます。異なる言語や書き込みモードを持つユーザーに対しても、常に意図した「インライン方向の終わり」にボーダーが表示されるため、一貫したデザインとユーザー体験を提供することが可能になります。

border-inline-endは、border-inline-end-width（ボーダーの幅）、border-inline-end-style（ボーダーのスタイル）、border-inline-end-color（ボーダーの色）の三つの個別プロパティをまとめて設定できるショートハンドプロパティです。これらの値を半角スペースで区切って一度に指定することで、CSSの記述を簡潔にし、スタイルシートの管理を容易にします。

Copy
1border-inline-end: 1px solid black;

引数なし

引数はありません

戻り値なし

戻り値はありません