 サンプル - Microsoft Internet Explorer |
|
solidです doubleです grooveです ridgeです outsetです insetです dottedです dashedです |
枠線の種類を指定する
■border-style:
指定できる値
キーワードで指定
solid double groove ridge
outset inset dotted dashed none
| 値の指定方法 | 個別に設定するプロパティ | ||
|---|---|---|---|
| 値が一つ | 上下左右同じ設定 | border-top-style | 上のみ設定 |
| 値が二つ | 上下、左右の設定 | border-left-style | 左のみ設定 |
| 値が三つ | 上と左右と下の設定 | border-right-style | 右のみ設定 |
| 値が四つ | 上、右、下、左の順で設定 | border-bottom-style | 下のみ設定 |
ボックスの枠線の種類を設定するには、border-styleプロパティを使います。
枠線といえば、HTMLではtableタグやimgタグにborder属性を付けて表示しましたが、このプロパティを使えば見出しや段落、そしてページ全体などにも枠線をつけることが出来ます。
スタイルシートはこのようにいろいろな所に枠線を引けるだけでなく、枠線の種類も指定することも出来ます。
例えば、値にdoubleを指定すると二重線の枠線を引くことも出来ます。枠線の種類は下の例を参考にして下さい。
次に値の設定方法ですが、指定する値の数によって枠線の設定内容が変わります。
もし、値を4つ指定した場合は、最初の値で上の枠線の種類を設定し、次の値で右の枠線、その次の値で下の枠線、最後の値で左の枠線をそれぞれ設定します。
このように、複数の値を設定する場合はそれぞれを半角のスペースで区切って下さい。
また、枠線の種類を上下左右、それぞれを設定するプロパティもあります。
border-styleプロパティとよく似ていて、border-top-styleのように枠線の設定をしたい場所のキーワード(-top)を、border-styleプロパティに付けたします。この場合は、ボックスの上側だけの枠線を設定することが出来ます。
HTML&CSS
<html> <head> <title>サンプル</title> <style type="text/css"> <!-- p{ border-width: 3px ; padding:4px; } .test1 { border-style: solid; } .test2 { border-style: double; } .test3 { border-style: groove; } .test4 { border-style: ridge; } .test5 { border-style: outset; } .TEST6 { border-style: inset; } .TEST7 { border-style: dotted; } .TEST8 { border-style: dashed; } --> </style> </head> <body> <p class="test1">solidです</p> <p class="test2">doubleです</p> <p class="test3">grooveです</p> <p class="test4">ridgeです</p> <p class="test5">outsetです</p> <p class="TEST6">insetです</p> <p class="TEST7">dottedです</p> <p class="TEST8">dashedです</p> </body> </html>