要素の右側のボーダーの色を指定するborder-right-color。
意味や役割はなんとなくわかるけど、正しい使い方を知らない人もいるでしょう。
・具体的な使い方を知りたい･･･。
・border-rightとの違いは？
こんな疑問を持っていませんか？
今回は、border-right-colorの
・border-rightとの違い
・border-right-colorで値を指定する様々な方法
について説明します。
目次
border-right-colorとは
border-right-colorとはどういったプロパティなのか、詳しく知らない人も多いでしょう。
なのでここでは、border-right-colorの意味や役割について解説していきます。
border-right-colorの読み方
border-right-colorは「ボーダー・ライト・カラー」と読みます。
「border」は「枠線・ボーダー」、「right」は「右」、「color」は「色」という意味があります。
CSSでは、この「border-right-color」を「右側のボーダーの色」という意味で使われています。
例えば、要素の右側のボーダーの色だけを指定したいときに、使われることが多いです。
border-right-colorは右側のボーダーの色を指定するプロパティ
border-right-colorは「右側のボーダーの色を指定するプロパティ」です。
border-right-colorを指定すると、右側のボーダーの色を設定することができます。
色を指定するときは、色の名前や#FFFFFF、rgb(r,g,b)などの指定が可能です。
border-right-colorで利用できる値
border-right-colorでは以下の値を使うことができます。
| 値 | 説明 |
|---|---|
| color | 右の境界線の色を定義します。 |
対応ブラウザ
対応ブラウザは以下の通りです。
| PC用ブラウザ | 対応状況 |
|---|---|
| Chrome | 完全対応 |
| Edge | 完全対応 |
| Firefox | 完全対応 |
| Internet Explorer | 完全対応 |
| Opera | 完全対応 |
| Safari | 完全対応 |
| スマートフォン用ブラウザ | 対応状況 |
| Android webview | 完全対応 |
| Android版Chrome | 完全対応 |
| Android版Firefox | 完全対応 |
| Android 版 Opera | 完全対応 |
| iOS版Safari | 完全対応 |
| Samsung Internet | 完全対応 |
border-right-colorの基本的な使い方
border-right-colorの意味や役割についてわかりました。
なのでここでは、実際にborder-right-colorの使い方を解説していきます。
まだ使い方を知らない人は、しっかりと理解していきましょう。
border-right-colorの使い方
border-right-colorを指定するときは、「border-right-color: 〇〇;」と記述します。（〇〇には、色名や#FFFFFF、rgb(r,g,b)などが入ります。）
実際の使い方をコードを用いて見ていきましょう。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<html lang="ja"> <head> <title>サンプルページ</title> </head> <style media="screen"> p { display: inline-block; border: solid; border-right-color: lightblue; } </style> <body> <p>要素</p> </body> </html> |
※border-right-colorを指定するときは、borderとセットで使います。
また、ボーダーが文字の真横に来るように「display: inline-block;」を指定しています。
今回は例として、pタグを用意し「border: solid;」と指定します。
そして、そのpタグに「border-right-color: lightblue;」と指定してみましょう。
すると、結果は次のようになります。
pタグの右側のボーダーの色だけが、水色になっていますね。
このように、border-right-colorを指定すれば、ボーダーの右側の色だけを変更することができます。
なので、使い方を覚えておくといいでしょう。
border-right-colorとborder-rightの違い
border-right-colorと似たプロパティで、border-rightというものがあります。
border-rightは、右側のボーダーのスタイル・太さ・色をまとめて指定するプロパティです。
ここでは、border-right-colorとborder-rightにどのような違いがあるのか、詳しく解説していきます。
border-rightの実際の使い方をコードで見ていきましょう。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<html lang="ja"> <head> <title>サンプルページ</title> </head> <style media="screen"> p { display: inline-block; border-right: solid 10px lightblue; } </style> <body> <p>要素</p> </body> </html> |
※ボーダーが文字の真横に来るように、「display: inline-block;」と指定しています。
例として、pタグを用意します。
そして、そのpタグに「border-right: solid 10px lightblue;」と指定してみましょう。
すると、結果は次のようになります。
今回は、「solid 10px lightblue」と指定したので、スタイルは1本線、太さは10px、色は水色のボーダーになっていますね。
このように、border-rightを指定すると、右側のボーダーのスタイル・太さ・色をまとめて設定することができます。
右側のボーダーの色だけを指定したいときはborder-right-color、右側のボーダーのスタイル・太さ・色をまとめて指定したいときはborder-rightというように使い分けるといいでしょう。
border-right-colorで値を指定する様々な方法
ここまでで、border-right-colorの基本的な使い方がわかりました。
なのでここからは、border-right-colorで値を指定する様々な方法を解説していきます。
border-right-colorで指定できる値は、色の名前や#FFFFFF、rgb(r,g,b)などです。
実際の使い方をコードで見ていきましょう。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<html lang="ja"> <head> <title>サンプルページ</title> </head> <style media="screen"> p { display: inline-block; border: solid; } .sample1 { border-right-color: lightblue; } .sample2 { border-right-color: #ff5533; } .sample3 { border-right-color: rgb(0, 100, 250); } </style> <body> <p class="sample1">要素</p> <p class="sample2">要素</p> <p class="sample3">要素</p> </body> </html> |
例として、pタグをいくつか用意し「border: solid;」と指定します。
そして、それぞれのpタグにクラス名をつけて「border-right-color」を指定してみましょう。
今回は色を、「lightblue」「#ff5533」「rgb(0, 100, 250)」としました。
結果を表示すると、次のようになります。
それぞれのpタグで右側のボーダーの色が違いますね。
このように、border-right-colorは自分の好きな色を指定することができます。
なので、使い方を覚えておくといいでしょう。
まとめ
今回は、border-right-colorの意味や使い方について解説しました。
border-right-colorは、要素の右側のボーダーの色を指定するプロパティです。
上下左右ある中の、右側のボーダーの色だけを指定したいときに役立ちます。
なので、使い方を覚えておくといいでしょう。
この記事がborder-right-colorの学習に役立つと幸いです。
参考文献：MDN web docs｜border-right-color – CSS：カスケーディングスタイルシート
