TOP ＞ マージン・パディング・ボーダー ＞ ボーダーの種類・色・幅をスタイルシートで指定する。
ボーダーの種類・色・幅をスタイルシートで指定する。
『スタイルシートでボーダーをひく』では、 border-topなどのプロパティを使って、上下左右のボーダーに対してそれぞれ境界線の種類や色、幅を指定していました。ここでは、 線の種類/色/幅の別に各方向の設定をまとめる方法を紹介します。
この場合は、線の種類「border-style」、色「border-color」、幅「border-width」を使用します。 それぞれ1～４個の値を指定することが出来ます。値の数と指定先の関係は以下の表で確認してください。
border-style/border-color/border-widthに指定する値の数と意味
| 値数 | 意味 |
| 1 | 上下左右の境界線に同じ設定をする |
| 2 | 一つ目は上下、二つ目で左右の境界線を設定する |
| 3 | 一つ目は上、二つ目で左右、三つ目で下の境界線を設定 |
| 4 | 上、右、下、左の時計回りの順に境界線を設定する |
ボーダーの種類・色・幅をスタイルシートで指定する。
【書き方】
border-style :種類････ 種類;
border-color :色････ 色;
border-width :幅････ 幅;
"ボーダーの種類・色・幅をスタイルシートで指定する。"のサンプルはコチラをクリック
- サンプルページのコードは以下の通りです。
|
【スタイルシート】 body{margin: 0px; background-image: url(http://www.1css.net/img/box2.gif); } .c1{ margin: 10px; border-style: double; border-color: #ff00ff; border-width: 5px; } .c2{ margin: 10px; padding: 10px; border-style: dashed solid dotted solid; border-color: #0000ff #00ff00 #ff0000; border-width: 3px 10px; } 【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/406.css" type="text/css"> </head> <body> <p><font color="red">body要素のマージンを上下左右すべて0pxとしていますので、このように、ページの端々にテキストがぴったり引っ付いてしまいます。</font></p> <p class="c1">この段落では、上下左右のボーダーを二重線（double）、<br />色をピンク色、幅を5pxに設定しています。</p> <p class="c2">この段落では、ボーダーを以下のように設定しています<br /><br />線の種類：上が破線(dashed)、下が点線(dotted)、左右が実線(solid)<br />色：上が青、下が赤、左右が緑色<br />幅：上下が3px、左右が10px </p> </body> </html> |
[
マージン・パディング・ボーダー ]
