CSSで枠線を表示する
CSSで枠線を表現したいとき、borderプロパティを使用します。
border-widthで線の太さ、border-styleで線の種類、
border-colorで枠線の色をそれぞれ指定できますが、
borderで、一括で指定すると便利です。
.sample {
border:solid 1px #FF0000;
}
サンプルです。サンプルです。
また枠線を上、下、左、右で個別に指定したい場合は、
それぞれborder-top,border-bottom,border-left,border-right
というように指定します。
.sample1 {
border-left:solid 2px #0000FF;
}
.sample2 {
border-bottom:dashed 1px #FF6600;
}
サンプルです。サンプルです。
サンプルです。サンプルです。
枠線の種類についてですが、ブラウザによって表示の仕方が違うものがあります。
| none | 線無し |
| solid | 1本線 |
| double | 2重線 |
| dotted | 点線 |
| dashed | 破線 |
| groove | 窪んだように見えます |
| ridge | 隆起しているように見えます |
| inset | 立体的に窪んだように見えます |
| outset | 立体的に隆起しているように見えます |
特にgroove,ridge,inset,outsetに関してIEでは正しく表現されないので、
使用する場合には注意が必要です。
また、dotted,dashedに関してもIEとFirefoxなどとでは表示が少し異なるので、
どうしても同じ表現にしたい場合は、背景画像で指定したほうが良いかと思います。
