Webエンジニア向けプログラミング解説動画をYouTubeで配信中!
▶ チャンネル登録はこちら

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

border-inline-start-colorプロパティの使い方について、初心者にもわかりやすく解説します。

作成日: 更新日:

基本的な使い方

border-inline-start-colorプロパティは、要素のインライン方向の開始側境界線の色を保持するプロパティです。

このプロパティはCSSの論理プロパティの一つであり、テキストの書字方向(writing-mode)や記述方向(direction)に基づいて、境界線の適用位置を自動的に決定します。従来のborder-left-colorのような物理的な方向を指定するプロパティとは異なり、書字方向が変わる多言語対応ウェブサイトにおいても、常に「インライン開始側」という論理的な位置に一貫した色を適用できる点が特徴です。例えば、左から右へ書かれる言語では要素の左側に、右から左へ書かれる言語では要素の右側に境界線の色が適用されます。これにより、国際化されたUI設計と視覚表現の一貫性を両立させることが可能です。

設定できる値は、red#FF0000rgb(255, 0, 0)などのCSSの<color>データ型で定義されるあらゆる色指定方法です。transparent(透明色)やcurrentColor(現在のテキスト色)も利用できます。

このプロパティは、他の関連する論理プロパティであるborder-inline-start-width(太さ)やborder-inline-start-style(スタイル)と組み合わせて使用します。

公式リファレンス: border-inline-start-color

構文(syntax)

1border-inline-start-color: red;

引数(parameters)

引数なし

引数はありません

戻り値(return)

戻り値なし

戻り値はありません

関連コンテンツ

関連プログラミング言語