ページにボーダーを付ける

CSSでbodyやtableなどの要素に枠線を付けることができます。
枠線の太さ、色、種類をCSSで指定します。
まずは、これらを一括して指定する例です。

<style><!--body{border:10px solid blue}--></style>

サンプル1

この例では、枠の太さ(ピクセル数)、枠の種類、枠の色の順で指定していますが、順番は特に決まっていません。
枠線の種類には以下のようなものがあります。
none	非表示(デフォルト)
hidden	非表示
dotted	点線
dashed	破線
solid	実線
double	二重線
groove	くぼみ線
ridge	隆起線
inset	内側へこみ
outset	内側盛り上がり
更に細かく指定することも可能です。
その前にそれぞれの値をプロパティで指定して書いてみます。
<style><!--body{border-width:10px;border-style:solid;border-color:blue}--></style>
上記はその前に書いたものと結果は同じになります。
まずは、枠線の太さを上下左右個別に指定してみます。
<style><!--body{border-top-width:0px;border-right-width:10px;border-bottom-width:20px;border-left-width:30px;border-style:solid;border-color:blue}--></style>

サンプル2

これだと上下左右全て太さを変えられます。
これを短く記述することもできます。
border-widthプロパティに対して、値を1つだけ記述すると、上下左右同じになり、2つ記述すると、1つ目の値が上下の値、2つ目の値が左右の値になります。
3つ記述すると、1つ目が上、2つ目が左右、3つ目が下になり、4つ記述すると、上、右、下、左の順です。
値は半角スペースで区切って記述します。
例:
<style><!--body{border-width:10px 20px 30px 40px;border-style:solid;border-color:blue}--></style>

サンプル3

枠線の色と種類も同様に個別指定ができます。
色の場合は個別のプロパティは、border-top-color,border-rigth-color,border-bottom-color,border-left-colorとなり、border-colorプロパティに対して、半角で区切って上、右、下、左の順に書くこともできます。
種類の場合は、border-top-style,border-right-style,border-bottom-style,border-left-styleとなり、border-styleに対して、上、右、下、左の順で指定できます。
個別の枠線ごとに太さ、種類、色を半角で区切って一括指定することも可能です。
<style><!--body{border-top:10px ridge yellow;border-right:15px dashed #FF0000;border-bottom:20px outset #CCCC99;border-left:8px solid #FF6666}--></style>

サンプル4

なお、NNではbody要素に対する枠線がきちんと表示されません。
一度見てみると分かりますが、変なところに横長に表示されてしまいます。(なんでだろ〜?)

[PAGE TOP] [HOME]
SEO [PR] おまとめローン Windows7 冷え性対策 動画 掲示板 レンタルサーバー ライブチャット SEO