スポンサード リンク
border-left-colorプロパティ
HTML要素の上の枠線の色を指定できます使い方(書式)
セレクタ { border-left-color: 値; }
border-left-colorプロパティ
対応ブラウザ | |
適用できる要素 | 全てのhtml要素 |
子要素へのスタイルの継承 | しない |
プロパティの値 | 説明 |
16進数 | #と赤、緑、青の三原色を表す16進数を2桁ずつ並べて色を指定します。 例 #FF9900 |
16進数(3桁) | #FF9900を省略して#F90と指定することもできます |
10進数 rgb | 赤、緑、青の三原色を0から255までの10進数で指定
rgb(255, 128, 0) この場合は255が赤の色の指定、128が緑の色の指定、0が青色の指定 |
10進数 rgb % | 三原色のパーセントで指定
rgb(100%, 50%, 0%) この場合は100%が赤の色の指定、50%が緑の色の指定、0%が青色の指定 |
色のキーワード | red、green、blue、pinkなど色をキーワードで指定 |
transparent | 枠線を透明にする。トランスパレント |
実際の指定方法
p.hoge { border-left-style: solid; /* 要素の枠線を実線で表示 */ border-left-color: #FF9900; /* 要素の左の枠線の色を#FF9900に指定 */ }
p.hoge2 { border-left-style: solid; /* 要素の枠線を実線で表示 */ border-left-color: #F90; /* 要素の左の枠線の色を#F90に指定 */ }
p.hoge3 { border-left-style: solid; /* 要素の枠線を実線で表示 */ border-left-color: rgb(255, 128, 0); /* 要素の左の枠線の色をrgbで指定 */ }
p.hoge4 { border-left-style: solid; /* 要素の枠線を実線で表示 */ border-left-color: rgb(100%, 75%, 0%); /* 要素の左の枠線の色をrgbパーセンテージで指定 */ }
p.hoge5 { border-left-style: solid; /* 要素の枠線を実線で表示 */ border-left-color: red; /* 要素の左の枠線の色をキーワードで指定 */ }
html部分
<p class="hoge"> border-left-color: #FF9900;</p> <p class="hoge2"> border-left-color: #F90;</p> <p class="hoge3"> border-left-color: rgb(255, 128, 0);</p> <p class="hoge4"> border-left-color: rgb(100%, 75%, 0%);</p> <p class="hoge5"> border-left-color: red;</p>
実際の表示
border-left-color: #FF9900;
border-left-color: #F90;
border-left-color: rgb(255, 128, 0);
border-left-color: rgb(100%, 75%, 0%);
border-left-color: red;