概要
CSSプロパティ｢border-left-color｣は、左辺の境界線（ボーダー）の色を指定することができます。
※ただしこのプロパティのみ指定しても表示されません。これはボーダーのスタイルを指定するプロパティ、｢ border-style ｣の初期値が｢none｣になっているためです。そのため、スタイル（border-style）を一緒に指定するか、それらをまとめて指定できるCSSプロパティ border を利用するとよいでしょう。
<div class="border">3つの値を指定したボーダー要素</div>
<div class="border border-left-color">border-left-colorプロパティでボーダーの色を調整したボーダー要素</div>
<style>
div {
margin-bottom: 10px;
}
.border {
border: 5px solid #000;
}
.border-left-color {
border-left-color: #def;
}
</style>値の指定方法
{ border-left-color: 色 }前提として、ボーダースタイルの初期値が｢none｣なので、スタイルを指定していないとなにも表示がされませんので気をつけましょう。例の上段は｢border-top-width｣のみ指定しており、下段は border-style を指定しています。
<div class="border-left-width">本日の天気は晴れです。</div>
<div class="border-style border-left-color">本日の天気は晴れです。</div>
<style>
div {
margin-bottom: 10px;
}
.border-style {
border-style: solid;
}
.border-left-color {
border-left-color: #def;
}
</style>色について
指定できる色の種類です。
| 値 | 説明 |
|---|---|
| color | 色を指定します. #000000やrgb(0,0,0)でも指定できます |
プロパティの種類について
｢border｣ プロパティは、4辺それぞれに異なった値をいれることができませんが、細分化したプロパティを使用することによって、値を変更することができます（指定可のみ）。それぞれのプロパティをまとめた一覧になりますので確認してみてください。
| プロパティ名 | ４辺一括で指定される内容 | 細分化プロパティ名 |
|---|---|---|
| border | ボーダーの太さ、スタイル、色を指定できる | 4辺指定可。border-top、border-bottom、border-left、border-right |
| border-width | 太さを指定できる | 4辺指定可。border-top-width、border-bottom-width、border-left-width、border-right-width |
| border-style | スタイルを指定できる | 4辺指定可。border-top-style、border-bottom-style、border-left-style、border-right-style |
| border-color | 色を指定できる | 4辺指定可。border-top-color、border-bottom-color、border-left-color、border-right-color |
| border-image | 背景を指定できる | 4辺指定不可。border-image-source、border-image-slice、border-image-width、border-image-outset、border-image-repeat |
使用例
要素によって、ボーダーの色のみを変更したい場合などに使用するとよいでしょう。
<div class="border-style">本日の天気は晴れです。</div>
<div class="border-style border-left-color-1">本日の天気は晴れです。</div>
<div class="border-style border-left-color-2">本日の天気は晴れです。</div>
<div class="border-style border-left-color-3">本日の天気は晴れです。</div>
<style>
div {
margin-bottom: 10px;
}
.border-style {
border-style: solid;
}
.border-left-color-1 {
border-left-color: #ddeeff;
}
.border-left-color-2 {
border-left-color: #ffeedd;
}
.border-left-color-3 {
border-left-color: #eddbff;
}
</style>仕様書
CSS Backgrounds and Borders Module Level 3