divを除く全てのブロック要素には枠線を指定することができますが、
（インライン要素にも枠線を付けることは可能ですが、指定しても表示されなかったり、表示の乱れるブラウザがあるので、使用の際は注意が必要です）
ここではp（段落）を例にして、枠線をつける方法を紹介します。
普通の枠線
二重線
点線
荒い点線
谷型
山型
凹型
凸型
|
<head> <meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> <title>CSSでブロックを修飾</title> | |
|
<STYLE type="text/css"> <!-- p { border-style: solid; } --> </STYLE> |
←CSSの指定開始 ←CSSが無効である場合に、指示を読み込ませないようにするための指定−開始 ←pタグへのCSS指定開始 ←線種の指定。ほかの種類を指定する場合はsolidを別の指定に書き換えます。 ←pタグへのCSS指定終了 ←CSSが無効である場合に、指示を読み込ませないようにするための指定−閉じ ←CSSの指定終了 |
| </head> | |
<body>
<p>普通の枠線</p>
</body>
枠線に色を付ける場合は、p {
border-style: 線の種類; border-color:色の名前;
}と、線種を指定した上で色の指定を加えます。
なお、谷・山・凸・凹の立体感のある線は、色をつけると立体感が無くなり、普通の線との違いは殆どなくなります。
段落を紺色の点線で囲む。
CSSにはp {
border-style: dotted; border-color:mediumblue;
}と記述。
枠線の幅を指定する場合は、p {
border-style: 線の種類; border-width:幅;
}と、線種を指定した上で幅を指定します。
（線の色の指定はしてもしなくてもかまいません。）
幅は、border-width:5px;というように、数値にpx（ピクセル）をつけて指定します。
段落を10ピクセルの谷型の枠線で囲む。
CSSにはp {
border-style: groove; border-width:10px;
}と記述。