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

border-left-widthプロパティは、HTML要素の左側に表示される境界線（ボーダー）の太さを設定するためのプロパティです。このプロパティを用いることで、Webページ上で要素の左側のみに異なる幅の境界線を適用し、視覚的なデザインやレイアウトを細かく調整することが可能になります。

設定できる値としては、主に以下の二種類があります。一つ目はthin（細い）、medium（中程度）、thick（太い）といったキーワードで、相対的な太さを指定します。これらのキーワードは、ブラウザによって具体的なピクセル値が異なりますが、一般的にはmediumがデフォルト値として用いられます。二つ目は、px（ピクセル）、em、remなどの単位を伴う数値で、5pxのように具体的な太さを正確に指定することができます。負の値は設定できません。

このプロパティは初期値がmediumであり、親要素のスタイルを継承することはありません。そのため、特定の要素の左側境界線幅を変更したい場合は、その要素に対して明示的にborder-left-widthプロパティを設定する必要があります。

また、border-left-widthは左側の境界線のみを対象としますが、同様にborder-top-width、border-right-width、border-bottom-widthというプロパティも存在し、それぞれ上、右、下の境界線幅を設定できます。これら全ての方向の境界線幅をまとめて設定したい場合には、border-widthというショートハンドプロパティを利用すると、記述を簡潔にできます。さらに、左側の境界線について、幅だけでなくスタイル（border-left-style）や色（border-left-color）も一度に設定できるborder-leftというショートハンドプロパティも活用できます。これらのプロパティを理解し、適切に使いこなすことで、Webコンテンツの見た目を豊かにし、ユーザーにとって分かりやすいインターフェースを構築するための重要な基盤を学ぶことができます。

Copy
1selector {
2  border-left-width: 2px;
3}

引数なし

引数はありません

戻り値なし

戻り値はありません