初級篇★ページ作りの基礎知識２. スタイルシートを使ってみよう

VOL5. Box に関する設定　その２−１ ★ 枠線の幅、色、線種（デザイン）を個別に指定する

枠線についても、各辺ごとに個別に幅、色、デザインを指定することができます。

１．幅の指定

�@-1) マージンやパディング同様に各プロパティに対し「数値+単位」で指定する方法

（スタイルシートで使用できる単位については、「Column7.スタイルシートと単位」を参照して下さい。）

ex1. 

body { border-top-width: 3px;

border-right-width: 5px;

border-bottom-width: 3px;

border-left-width: 5px; }

�@-2) 「thin（細線）」、「medium（中間）」、「thick（太線）」で指定する方法

ex2. 

p { border-top-width: thin;

border-right-width: medium;

border-bottom-width: thick;

border-left-width: medium; }

なお、枠線の幅は、デフォルトでは「medium」になります。

２．色の指定

色指定はRGB値、色名（システムカラー含む）で指定することができます。なお、この場合は「transparent」を指定しても反映されません。

（スタイルシートで使える色指定について詳しくは「Column 8.スタイルシートと色指定」を参照して下さい。）

ex3.

body { border-top-color: red;

border-right-color: #ff0000;

border-bottom-color: #003366;

border-left-color: yellow; }

３．線種（デザイン）の指定 ・・・　各プロパティに以下のキーワードで指定します。

以上の他に、

none ・・・　枠線を表示しない （デフォルト）

hidden ・・・　枠線を表示しない

これらはどちらも枠線が非表示になりますが、テーブルなどの枠線と重なったような場合、none は他の値を優先して表示し、hiddenは自己の値を優先します。なお、何も指定しなければ、デフォルトで none の状態が適用されますので、枠線を表示するために幅や色を設定した場合は、必ず線種も指定する必要があります。

ex4. 

p { border-top-style: dotted;

border-right-style: solid;

border-bottom-style: double;

border-left-style: dashed; }

初級篇2.VOL５.Boxに関する設定その1 <<

>> 初級篇2.VOL５.Boxに関する設定その2-2