ボックス(枠線)

ボックス属性のうち、枠線に関するいろいろな属性

---

▼ボックスの基本と特徴

・ページ全体のレイアウトやテキストの周りに枠線を入れる場合、htmlではテーブルタグを応用していました
　しかしCSSの「ボックス」属性を使えば、簡単にいろいろな枠線を引くこともできますし、
　ページ全体のレイアウトでもテーブルより構成しやすいし、表示もかなり速くなります

・枠線を表示させるためには、IEではborder-style、NNではborder-widthを指定しておかなければなりません（必須）
　そのため両方のブラウザで表示させるために、「border-style」と「border-width」の両方を必ず設定するようにしましょう

・IEでは「SPAN」タグには「border」は対応していません
　NNでは「TABLE,TR,TD,IMG,LI,DD,DT,BUTTON,CAPTION,」タグには「border」は対応していません

・「上下左右の効果を個別に変えることができる」という説明があるときは、
　指定する値の数によって、効果が適用される組み合わせを変えることができます(左の値から順に)
値が一つ 上下左右
値が二つ 上下、左右
値が三つ 上、左右、下
値が四つ 上、右、下、左

例として、<div style="border-style:solid double groove ridge;"></div>とすると、


・（なお、このページでは枠線の幅を580pxに指定しています。ご了承下さい）

---

▼枠線のスタイルを指定(border-style)

・ 枠線のスタイルを指定する属性 (none/すべて/しない)
・上下左右の効果を個別に変えることができます
・IEではこの属性を指定しないと、他の「border」属性を指定しても効果は表れません(IEの必須属性)

「border-style:@@;」
solid 直線
double 二重線
groove 溝線
ridge 綾線
inset セルが沈み込んだような枠線
outset セルが浮き上がったような枠線
none 枠線は引かれません(初期値)

ex:
　<div style="border-style:solid;">これは直線です</div>

　<div style="border-style:double;">これは二重線です</div>

　<div style="border-style:groove;">これは溝線です</div>

　<div style="border-style:ridge;">これは綾線です</div>

　<div style="border-style:inset;">これはセルが沈み込んだような枠線です</div>

　<div style="border-style:outset;">これはセルが浮き上がったような枠線です</div>

---

▼枠線のスタイルを個別に指定(border-top-styleなど)

・上下左右の枠線のスタイルを個別に指定する属性 (none/すべて/しない)
・IEのみでしか表示されません(NNでは効果が表れません)

「border-top-style:@@;」 上の枠線のみに効果
「border-right-style:@@;」 右の枠線のみに効果
「border-bottom-style:@@;」 下の枠線のみに効果
「border-left-style:@@;」 左の枠線のみに効果
値は「solid,double,groove,ridge,inset,outset,none」で、詳しくは上の項目を参照ください

ex:

<div style="border-top-style:solid;">上の枠線のみに効果をして適用することができます</div>

---

▼枠線の太さを設定(border-width)

・枠線の太さを指定する属性 (medium/すべて/しない)
・上下左右の効果を個別に変えることができます
・NNではこの属性を指定しないと、他の「border」属性を指定しても効果は表れません(NNの必須属性)

「border-width:@@;」

任意の数値と単位 任意の数値と単位で太さを設定

キーワードによる指定
thin 細めの線
medium 普通の太さ
thick 太めの線

ex:

<div style="border-width:thick;">枠線の太さを太めの線に設定しました</div>

---

▼枠線の太さを個別に指定(border-top-widthなど)

・上下左右の枠線の太さを個別に指定する属性 (medium/すべて/しない)

「border-top-width:@@;」 上の枠線のみに効果
「border-right-width:@@;」 右の枠線のみに効果
「border-bottom-width:@@;」 下の枠線のみに効果
「border-left-width:@@;」 左の枠線のみに効果
値は「任意の単位と数値、またはthin,medium,thickのキーワード」で、詳しくは上の項目を参照ください

ex:

<div style="border-right-width:25px;border-style:solid;">右の枠線のみに効果をして適用することができます</div>

---

▼枠線の色を設定(border-color)

・枠線の色を指定する属性 (要素の背景色/すべて/しない)
・上下左右の効果を個別に変えることができます
・単独では効果がありません。IEとNNの「border」必須属性を指定する必要があります
・上下左右の枠線の色を個別に指定する属性はありますが、対応ブラウザがないため省略します
　ブラウザのバージョンが上がれば使えるようになると思います。設定方法は他のと同じです

「border-color:@@;」
#RGB、rgb()、キーワード、いずれの指定でも可

ex:

<div style="border-color:#00ff00;border-width:medium;border-style:solid;">枠線の色を緑色にしてみました</div>

---

▼枠線の属性を一括して設定する(border)

・枠線に関する属性を一括して設定するための属性 (各属性の初期値/すべて/しない)
・これを使えば枠線に関する設定をまとめられるので便利です
・各属性の値を省略した場合はそれぞれの初期値が適用されます

「border: 1 2 3 ;」
1- border-widthの値 (太さ)
2- border-styleの値 (スタイル)
3- border-colorの値 (色)

ex:

<div style="border:12px solid #00ff00;">枠線属性を一括設定しました。通常はこれを使うといいでしょう</div>

---

▼各枠線の各値を一括して設定する(border-topなど)

・上下左右の枠線の各値を枠線ごとに設定する属性 (各属性の初期値/すべて/しない)
・各属性の値を省略した場合はそれぞれの初期値が適用されます

「border-top: 1 2 3 ;」 上の枠線の効果を一括設定
「border-right: 1 2 3 ;」 右の枠線の効果を一括設定
「border-bottom: 1 2 3 ;」 下の枠線の効果を一括設定
「border-left: 1 2 3 ;」 左の枠線の効果を一括設定
値は「1,2,3」は、枠線の属性を一括して設定する方法と同じなので、詳しくは上の項目を参照ください

ex:

<div style="border-top:5px solid #00ff00;border-bottom:5px solid #00ff00;">上と下の枠線の効果を一括設定しました</div>

---