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