border-bottom-colorプロパティは、ボーダーに色を指定するための設定です。
他にもボーダーに色を指定する設定がいくつかありますが、
と思う方がいるでしょう。
そこで今回は、border-bottom-colorプロパティの
・応用的な使い方
について説明していきます。
目次
border-bottom-colorプロパティとは
border-bottom-colorプロパティの読み方
border-bottom-colorは、「ボーダー-ボトム-カラー」と読みます。
ボーダーに色を指定するために使われるプロパティの一つです。
border-bottom-colorプロパティの説明
border-bottom-colorプロパティとは
ために使います。
ですが、border-bottom-colorプロパティの設定だけでは、下のボーダーに対して色を付けられません。
下のボーダーを指定する前にボーダーのスタイルを決める設定が必要です。
ボーダーの線の種類を決める設定とはどのようなものか、この記事内で説明していきます。
border-bottom-colorプロパティで利用できる値
border-bottom-colorプロパティでは以下の値を使うことができます。
| 値 | 説明 |
|---|---|
| カラーネーム | カラーネームは、特定の色を表す英単語です。 |
| 16進数 | 数字やアルファベットを組み合わせた16進数によって色を決めます。 |
| RGB | 赤、緑、青のそれぞれの数値で色が変わります。 |
| transparent | transparentを指定すると色が透明になります。 |
対応ブラウザ
対応ブラウザは以下の通りです。
| PC用ブラウザ | 対応状況 |
|---|---|
| Chrome | 完全対応 |
| Edge | 完全対応 |
| Firefox | 完全対応 |
| Internet Explorer | 完全対応 |
| Opera | 完全対応 |
| Safari | 完全対応 |
| スマートフォン用ブラウザ | 対応状況 |
| Android webview | 完全対応 |
| Android版Chrome | 完全対応 |
| Android版Firefox | 完全対応 |
| Android 版 Opera | 完全対応 |
| iOS版Safari | 完全対応 |
| Samsung Internet | 完全対応 |
border-bottom-colorプロパティの基本的な使い方
border-bottom-colorプロパティの使い方
border-bottom-colorプロパティを設定するとどうなるのか実際に見ていきましょう。
See the Pen
border-bottom-colorプロパティの使い方 by 吉井大輝 (@DaiW)
on CodePen.
border-bottomプロパティを使用すると上記のように下のボーダーのスタイルを指定できます。
border-bottom-colorプロパティで青色を示す16進数を指定したため、下のボーダーは青に変わります。
border-bottomプロパティは、スタイルだけでなく、太さや色の指定も可能です。
つまり、border-bottom-colorプロパティがなくとも、border-bottomプロパティのみで設定ができるということです。
ですが、border-bottom-colorプロパティを使った方が良い場面もありますよ。
border-bottom-colorプロパティとborder-bottomプロパティの使い分け
border-bottom-colorプロパティを使った方が良い設定について、コードを交えて説明していきます。
See the Pen
border-bottom-colorプロパティを使う場面 by 吉井大輝 (@DaiW)
on CodePen.
ボーダーのスタイルの設定がされているならば、border-bottom-colorプロパティの設定が可能なので、borderプロパティでもボーダースタイルを指定できます。
borderプロパティとborder-bottom-colorプロパティを設定する場合、上記のように、ボーダー全体に色が付いている中で下のボーダーの色を変えたい場合に使用します。
色に加えてスタイルや太さなど、色々指定したい場合border-bottomプロパティを使うのは良いでしょう。
しかし、下のボーダーの色を変えたいだけならば、border-bottom-colorプロパティの設定で問題ありません。
border-bottomプロパティとborder-bottom-colorプロパティのどちらを使うか迷ったとき、参考にしてください。
border-bottom-colorプロパティの応用的な使い方
border-bottom-colorプロパティで下のボーダーを透明にする
下のボーダーを透明にしたコードを以下に記述していきます。
See the Pen
border-bottom-colorプロパティで下のボーダーだけ透明にする by 吉井大輝 (@DaiW)
on CodePen.
下のボーダーを透明にするには、border-bottom-colorプロパティのtransparentを指定します。
borderプロパティは以下のように、
|
1 |
border:solid 5px #b0c4de; |
スタイル、太さ、色を指定しますが、上下左右のボーダーに反映されます。
もし、borderプロパティにtransparentを指定したら下のボーダーだけでなく全て透明になってしまいます。
つまり、下の色を透明にするのには、border-bottom-colorプロパティの値でtransparentの指定が必要になるということです。
ボーダー全てに色が付いている中で、下のボーダーを透明にしたいとき、上記のコードを参考に設定してみてください。
まとめ
いかがでしたでしょうか？
今回は、border-bottom-colorプロパティの基本的な使い方と応用的な使い方についてご紹介しました。
border-bottom-colorプロパティの設定に役立つコードも含めて説明しています。
border-bottom-colorプロパティの知識を深めたいときぜひ活用してください。
参考文献：MDN web docs｜border-bottom-colorプロパティ :CSS のプロパティで、要素の下側の境界線の色を設定します。
