TOP ＞ マージン・パディング・ボーダー ＞ スタイルシートでボーダーを個別に指定する
スタイルシートでボーダーを個別に指定する
スタイルシートを使ってボーダーを指定する際に、ボーダーの方向と書式をピンポイントで指定することもできます。
たとえば、下に二重線を引きたい場合があれば、border-bottom-styleプロパティを使います。このやり方だと、 ある方向の書式を一つだけ指定する形になるので、border-bottomプロパティを使って指定したほうがスタイルシートがすっきりしたものになります。
スタイルシートでボーダーを個別に指定する。
【書き方】
border-xxx-yyy :値;
xxxにはtop/bottom/left/rightのどれか、
yyyにはstyle/color/widthのどれかがはいる
"スタイルシートでボーダーを個別に指定する。"のサンプルはコチラをクリック
- サンプルページのコードは以下の通りです。
|
【スタイルシート】 body{margin: 0px; background-image: url(http://www.1css.net/img/box2.gif); } .c1{ margin: 10px; border-bottom-color: #ff0000; border-bottom-style: double; border-bottom-width: 6px; } .c2{ margin: 10px; padding: 10px; border-left-color: #00ff00; border-left-style: groove; border-left-width: 20px; } 【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/407.css" type="text/css"> </head> <body> <p><font color="red">body要素のマージンを上下左右すべて0pxとしていますので、このように、ページの端々にテキストがぴったり引っ付いてしまいます。</font></p> <p class="c1">この段落では、下線のボーダーを二重線（double）、色を赤色、幅を6pxに設定しています。<br />スタイルシートには「border-bottom-color: #ff0000; border-bottom-style: double; border-bottom-width: 6px;」と指定していますが、<br />「border-bottom: double #ff0000 6px;」の方がすっきりします。 </p> <p class="c2">この段落では、下線のボーダーをgroove、色を緑色、幅を20pxに設定しています。<br />スタイルシートには「border-left-color: #00ff00; border-left-style: groove; border-left-width: 20px; 」と指定していますが、<br />「border-left: groove #00ff00 20px;」の方がすっきりします。 </p> </body> </html> |
[
マージン・パディング・ボーダー ]
