border-colorプロパティ。
CSSに於ける、ボックスの枠線(ボーダ)の色の上下左右一括指定記法・border-colorプロパティに関する解説です。
border-colorプロパティとは。
border-colorプロパティは、ボックスの枠線(ボーダ)の色の上下左右一括指定記法です。
border-colorプロパティの書式。
border-colorプロパティの書式は、以下のようになります。
border-color: 値値としては、以下のものが取れます。
inherit- 一番近い上位要素で指定された値を継承します。
- 枠線の色一つ
- 上下左右、四方の枠線の幅を全て指定された枠線の色にします。この場合、四方とも同じ枠線の色が適用されます。
- 枠線の色二つ
-
の順で空白で区切って指定します。
- 枠線の色三つ
-
の順で空白で区切って指定します。
- 枠線の色四つ
-
の順で空白で区切って指定します。
上から時計廻り
と覚えると良いでしょう。
border-colorプロパティで指定出来る枠線の色。
border-colorプロパティで指定出来る枠線の色は以下の通りになります。
- transparent
- 透明となります。すなわち、上位要素などの背景をそのまま表示します。
- 色の値
- 色の値を指定した場合、その色が適用されます。
尚、border-colorプロパティのデフォルト値は、前景色(colorプロパティで指定)となります。
border-colorプロパティの記述例。
例えば、HTMLの<blockquote>要素において、上下左右に緑で実線 4ピクセルズの枠線を引きたい場合は、
blockquote {border-color: #090;border-style: solid;border-width: 4px;}
と記述します。
この場合、必ず
- border-styleプロパティなどで枠線の形を
- border-widthプロパティなどで枠線の幅を
それぞれ指定する必要があります。
border-colorプロパティに関する注意事項。
border-colorプロパティの使用上の注意。
枠線を非表示にするので無い限り、必ず
- border-styleプロパティなどで枠線の形を
- border-widthプロパティなどで枠線の幅を
それぞれ指定する必要があります。
- border-styleプロパティなどを指定しないと、枠線が非表示になります。
- border-widthプロパティなどを指定しないと、枠線の幅が零となり、やはり非表示になります。
border-colorプロパティの実装上の注意。
ネットスケープ 4.xでの注意事項。
インライン要素にborder-colorプロパティを当ててはいけません。
ネットスケープ 4.xでは、インライン要素にborder-colorプロパティを当ててはいけません。
インライン要素にborder-colorプロパティを当てると、ブロックレヴェル要素として表示されてしまいます。
- 特に<a>要素はアンカーとして機能しなくなります。
- また、<img>要素にborder-colorプロパティを当てると、意味不明な枠線が描かれると言う問題が起こります。このため、<a>要素内の<img>要素で枠線を消したい場合は、colorプロパティで背景色と同じ色を指定してやる事で、枠線を目立たないようにするしかありません。
ネットスケープ 4.xではブロックレヴェル要素が正しく表示されません。
ネットスケープ 4.xでブロックレヴェル要素をボーダ(枠線)付きで表示させようとすると、文字のある範囲だけに枠線が掛かります。
- 正しい実装ならwidthプロパティなどを指定しない限り、行の左端から右端にかけてボーダ(枠線)が表示されます。
marginプロパティなどで右か左に0でも良いので余白(マージン)の値を与えると、行の左端から右端にかけててボーダ(枠線)が表示されるようになります。
ネットスケープ 4.0xではボーダ(枠線)を使うとクラッシュする恐れがあります。
ネットスケープ 4.0xが認識しないインライン要素を含む要素にボーダ(枠線)を表示させると、ユーザエージェントがクラッシュします。
- 以下の要素がネットスケープ 4.xが認識しないインライン要素です。
この他、未定義のタグをインライン要素として利用すると(要素名の綴り間違いなど)、同様のトラブルが起こる恐れがあります。
- ネットスケープ 4.5以降では認識しないインライン要素とボーダ(枠線)を併用してもクラッシュする恐れはなくなったようです。
インターネットエクスプローラでの注意事項。
インターネットエクスプローラのウィンドウズ版 5.0x以前及びマッキントッシュ版 4.xでは、インライン要素でのborder-colorプロパティは機能しません。
WAP 2.0での注意事項。
WAP 2.0では、border-colorプロパティは必須ですが、オープンウェーヴ社のWAP 2.0 ウェブブラウザには実装されておりません。