TOP ＞ マージン・パディング・ボーダー ＞ スタイルシートですべての方向に同じボーダーを引く。
スタイルシートですべての方向に同じボーダーを引く。
一般的に境界線を引く場合、上下左右すべてにバラバラな設定をすることは稀です。 そんなことをするとかえって見にくくなってしまうからです。 スタイルシートで上下左右の四方向に同じボーダーを引くにはborderプロパティを使います。
ただし、borderプロパティを使用した場合は、方向別に設定することは出来ません。
borderプロパティに指定できる値の種類は、幅/色/線の種類の３つです。スタイルシートに書き込む際の順番は問いません。
スタイルシートですべての方向に同じボーダーを引く。
【書き方】
border : 幅 色 線の種類;（順不同）
"スタイルシートですべての方向に同じボーダーを引く。"のサンプルはコチラをクリック
- サンプルページのコードは以下の通りです。
|
【スタイルシート】 body{margin: 0px; background-image: url(http://www.1css.net/img/box2.gif); } .c1{ margin: 10px; border: groove 10px #ff0000; } .c2{ margin: 10px; border: ridge 10px #00ff00; } .c3{ margin: 10px; border: double 5px #0000ff; } .c4{ margin: 10px; border: dashed 5px #00ffff; } 【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/408.css" type="text/css"> </head> <body> <p><font color="red">body要素のマージンを上下左右すべて0pxとしていますので、このように、ページの端々にテキストがぴったり引っ付いてしまいます。</font></p> <p class="c1">この段落の境界線を幅10px、赤色、くぼみに設定しています。</p> <p class="c2">この段落の境界線を幅10px、みどり色、浮き出しに設定しています。</p> <p class="c3">この段落の境界線を幅5px、青色、二重線に設定しています。</p> <p class="c4">この段落の境界線を幅5px、水色、破線に設定しています。</p> </body> </html> |
[
マージン・パディング・ボーダー ]
