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