XHTML/CSS・トップ | CSSプロパティ・目次

●枠線をまとめて指定する

 border は、枠線の種類、太さ、色をまとめて指定するプロパティです。値を半角スペースで区切ることにより、種類、太さ、色を一度に指定できます。最低限ひとつ指定すれば、ほかは省略することが可能です。(値の順不同)また、すべての要素に適用できます。


 ■指定できる枠線の種類の一覧表

種類 説明
dashed 破線
dotted 点線
double 二重線
groove 彫り線、みぞ線
hidden 隠れという意味があり、非表示のこと
inset 差し込み線、要素をへこませたような効果
none 非表示
outset insetとは逆に要素を浮き上がらせる効果
ridge 山脈の意味があり、浮き彫り効果の線
solid 実線

【CSS】

body {
 background-color: #000000;
 color: #ffffff
}
h3 {
 border: ridge 10px #ff6347;
 background: #ffffff;
 color: #000000
}
p {
 border: double 8px #ff00ff;
 background: #e0ffff;
 color: #880000
}

【補足】

 必要がなければ、要素内の背景色、文字色は記載しなくても構いません。下のサンプルは実際にはクラス名を使っており、そのほかも含めてソースが複雑ですが、シンプルに書くと上記のようになります。実際に使用するときはクラス名(または、id名)を使って指定したほうが良いでしょう。(クラス名の使い方は別項を参照にしてください。) 

※直接関係のある書式は h3 { border: ridge 10px #ff6347 } p { border: double 8px #ff00ff } です。


h3の見出しの枠線に ridge(浮き彫り線)、太さ10px、#ff6347の色を指定しています。

 p要素の枠線に double(二重線)、8pxの太さ、#ff00ffの色を指定しています。


【HTML】

<h3>h3の見出しの枠線に ridge(浮き彫り線)、太さ10px、#ff6347の色を指定しています。</h3>
<p> p要素の枠線に double(二重線)、8pxの太さ、#ff00ffの色を指定しています。</p>


【まとめ】

 border プロパティは border-top、border-bottom、border-left、border-right のプロパティを一度に指定するときに使います。これらのプロパティを使って、上下左右の枠線のひとつひとつに指定することもできます。こちらの使い方も含め、上下左右の枠線にそれぞれ違う種類、太さ、色をより詳細に指定したい場合は応用編を参考にしてください。

 また、要素に枠線を適用した場合、枠線と内容領域との中間領域として、パディング(padding)を考りょしなければならない場合があります。例えば、見出しに枠線を配置したとき、枠線と内容領域としての文字列との間には適度のパディングがあったほうが見やすくなります。(上の h3の見出しには 0.5em の padding を設けています。)


■参考ページ

XHTML/CSS・目次 | 領域(ボックス)・目次

Copyright (C) 2005-2007 http://www.xml.vc/