TOP ＞ マージン・パディング・ボーダー ＞ スタイルシートでボーダーを引く
スタイルシートでボーダーを引く
HTMLを使って枠線を引くには、tableタグを重ねて設定するなど非常に長くHTML文を書く必要があります。 スタイルシートを使って要素のパディングの外側に境界線を引けば、HTMLをスリム化することが出来ます。
スタイルシートでボーダーを引く場合、線の太さ・線の種類・線の色をプロパティを指定します。指定順番は特に決まりがなく、 省略も可能です。
線の太さは、「1px」「1pt」などの数値で設定するか、「thin(細い)」「medium（中間）」「thick（太い）」 であらわします。指定を省略する場合は太さはmediumがデフォルトとなります。
線の種類は以下の表のようになります。省略すると「none」が選択されます。
borderプロパティに指定できる線の種類
| 値 | 内容 |
| none | 境界線なし |
| dotted | 点線 |
| dashed | 破線 |
| solid | 実線 |
| double | 二重線 |
| groove | 窪みのように見える |
| ridge | 浮き出したように見える |
| inset | 立体的に窪んだように見える |
| outset | 立体的に浮き出したように見える |
線の色は、「#ffffff」のようなRGB値か「white」のような単語で指定します。省略した場合は、 要素の色と同じ色の線が引かれます。
スタイルシートでボーダーを引く
【書き方】
border-top:太さ 線の種類 色; border-bottom:太さ 線の種類 色;
border-left:太さ 線の種類 色; border-right:太さ 線の種類 色;
"スタイルシートでボーダーを引く"のサンプルはコチラをクリック
- サンプルページのコードは以下の通りです。
|
【スタイルシート】 body{margin: 0px; background-image: url(http://www.1css.net/img/box2.gif); } .c1{ margin: 10px; padding: 10px; border-top: dotted 3px #ff0000; border-bottom: dashed 3px #ff0000; border-left: double 3px #00ff00; border-right: solid 3px #00ff00; } .c2{ margin: 10px; padding: 10px; border-top: groove 3px; border-bottom: ridge 3px; border-left: inset 3px; border-right: outset 3px; } 【HTML本文】 <html> <head> <title>マージンをまとめて設定する。のサンプル</title> <meta http-equiv="content-type" content="text/html"> <meta http-equiv="content-style-type" content="text/css"> <link rel="stylesheet" href="http://www.1css.net/sample/405.css" type="text/css"> </head> <body> <p><font color="red">body要素のマージンを上下左右すべて0pxとしていますので、このように、ページの端々にテキストがぴったり引っ付いてしまいます。</font></p> <p class="c1">この段落では、上のボーダーは3pxで赤色の点線(dotted)で、<br />下のボーダーは3pxで赤色の破線(dashed)で、<br />左のボーダーは3pxで緑色の二重線(double)で、<br />右のボーダーは3pxで緑色の実線(solid)で引いています。</p> <p class="c2">この段落では、上のボーダーは3pxのgrooveで、<br />下のボーダーは3pxのridgeで、<br />左のボーダーは3pxのinsetで、<br />右のボーダーは3pxのoutsetで引いています。<br />境界線の色を指定しませんでしたので、文字色と同じ色の線が引かれています。</body> </html> |
[
マージン・パディング・ボーダー ]
