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