初心者のためのＨＰ作成講座では、ｔａｂｌｅタグで、borderの値によって枠線をつけることが出来ると書きました。

これはｔａｂｌｅタグの 枠線です。

スタイルシートを使えば、ｔａｂｌｅタグだけでなく、他のタグにも枠線をつけることが出来ます。

---

まずは、いろいろなタグにスタイルシートで枠線をつけた例から！

ｐタグに 枠線をつけた。	ｄｉｖタグに 枠線をつけた。	ｓｐａｎタグに枠線つけた。	ｆｏｎｔタグに枠線をつけた。
これはａタグ。つまり、リンクタグ	ｃｅｎｔｅｒタグに 枠線をつけた。	リストにも！ 枠線をつけると？	これはｔａｂｌｅタグに スタイルシートで枠線

これらの枠線はすべて、
style="border-style:ridge;border-width:4pt;border-color:white;"
と、スタイルシートで設定した結果です。
同じ設定でも、タグによって、どのように枠線がついているのか確認出来ます。
そして、このスタイルシートで設定しているのは、

border-style	枠線の形態・・これを設定すると、とりあえず枠が表示されます。（ＩＥ６）
border-width	枠線の幅・・上記のborder-styleを設定していないときは無効（ＩＥ６）
border-color	枠線の色・・上記のborder-styleを設定していないときは無効（ＩＥ６）

では、次にそれぞれの項目を一つずつ見ていきましょう。
◆ ここからは、すべてｄｉｖタグを使用します。
まず最初は、
border-styleです。
このような、設定があります。

border-style:

none・・枠線なし ridge・・立体的に盛り上がった感じの線 groove・・立体的にへこんだ感じの線 inset・・枠の中がへこんだように見える線 outset・・枠の中が盛り上がったように見える線 dotted・・点線 dashed・・点線その２ solid・・実線 double・・二重線

そして、それぞれの見本です。








◆ そして、それぞれの種類の線は、その太さを変えられます。
それを決めるのが、border-widthです。
たとえば、border-width:4pxとすると、上、右、下、左の４辺が４ピクセルの太さと言うことになります。
そして、４辺の太さを、それぞれ違った太さに設定することも出来ます。
border-width:上下 左右
border-width:上 左右 下
border-width:上 右 下 左
◆ border-colorでは、色を変更できます。
色はカラーネームかＲＧＢコードで指定できます。
たとえば、border-color:redでは、上辺、右辺、下辺、左辺の４辺を赤と指定したことになります。
ただし、border-styleによって、かなり感じが違います。
下の見本は、すべて４辺を赤に指定したものです。

border-style: ridge	border-style: groove	border-style: inset
border-style: outset	border-style: dotted	border-style: dashed
border-style: solid	border-style: double

そして、４辺の色をそれぞれ違う色に設定することも出来ます。
border-color:上下 左右
border-color:の後、２つ色を並べると、それぞれ、上下、左右の辺の色の設定になります。
例、
style="border-style:solid;border-width:6px;border-color:red blue;"
border-color:上 左右 下
border-color:の後、３つ色を並べると、それぞれ、上、左右、下の辺の色の設定になります。
例、
style="border-style:solid;border-width:6px;border-color:red blue white;"
border-color:上 右 下 左
border-color:の後、４つ色を並べると、それぞれ、上、右、下、左の辺の色の設定になります。
例、
style="border-style:solid;border-width:6px;border-color:red blue white black;"

---

では、最後にボーダーを使ったいろいろなものを・・・
点線のアンダーライン
カラフルな水平線として。