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

border-leftプロパティは、HTML要素の左側に表示される境界線（ボーダー）の幅、スタイル、色といった複数のデザイン設定に関する情報を保持するプロパティです。このプロパティは「ショートハンドプロパティ」として機能し、左側のボーダーの幅（border-left-width）、スタイル（border-left-style）、色（border-left-color）の3つの異なるプロパティを一括で設定するために使用されます。これにより、個々のプロパティを一つずつ記述するよりも、CSSの記述を簡潔に保つことが可能です。

具体的には、幅には「thin（細い）、medium（標準）、thick（太い）」といったキーワードや、「1px」のような具体的な長さを指定できます。スタイルには「solid（実線）、dotted（点線）、dashed（破線）、double（二重線）、none（なし）」など、多様な視覚表現が用意されています。色には「red（赤）、blue（青）」のようなキーワードのほか、「#RRGGBB」形式のHEXコード、「rgb(R,G,B)」形式のRGB値などを用いて、細やかな色彩を表現できます。これらの値は、スペースで区切って記述し、指定する順序は任意ですが、一般的には幅、スタイル、色の順で記述されることが多いです。

例えば、「border-left: 2px solid blue;」と記述すると、要素の左側に幅2ピクセルの青い実線ボーダーが適用されます。このプロパティを使用することで、Webページのレイアウトやデザインにおいて、特定の要素の左側を際立たせたり、視覚的な区切りを加えたりする際に効率的にスタイルを適用できます。もし一部の値が省略された場合、省略されたプロパティにはそれぞれの初期値が適用されます。このプロパティは、CSS Modulesのコンテキストにおいて、特に要素の特定の側面に対してデザインを適用する際の基本的なツールの一つとして活用されます。

Copy
1border-left: 1px solid #000000;

引数なし

引数はありません

戻り値なし

戻り値はありません