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

VOL5. Box に関する設定　その2−２ ★ 枠線の幅、色、線種（デザイン）を一括して指定する

枠線についての設定は全てを個別で並べると煩雑になるため、一括して指定することもできます。一括指定には、以下の3通りのやり方があります。

１．幅、色、線種の各項目ごとにまとめる

２．上辺、右辺、下辺、左辺、それぞれについてまとめる

３．四辺を統一して指定する

１．枠線の幅、色、線種を、各項目ごとにまとめて設定する

マージンやパディングと同様に<値>を横に並べ、一括して設定することができます。各項目の<値>が四辺のどれを指定しているかは、横に並ぶ<値>の数によって予め定められています。

border-width（color, style）: <上> <右> <下> <左>;  

　　　・・・<値>を4つ並べると、この順で各部分の幅、色、線種が決まります。

border-width（color, style）: <上> <左右> <下>;

　　　・・・<値>を3つ並べると、この順で各部分の幅、色、線種が決まります。

border-width（color, style）: <上下> <左右>;

　　　・・・<値>を2つ並べると、この順で各部分の幅、色、線種が決まります。

border-width（color, style）: <上下左右全て同じ>;

　　　・・・<値>を1つだけ書くと、四辺が全て同じ幅、色、線種で表示されます。

前章のex1、3、4を、この書き方でまとめて一括指定すると、以下のようになります。

p { border-width: 3px 5px;

border-color: red #ff0000 #003366 yellow;

border-style: dotted solid double dashed; }

２．上辺、右辺、下辺、左辺、それぞれについてまとめる

上の例では、幅、色、デザインに分けて一括で指定しましたが、上辺、右辺、下辺、左辺に分けてそれぞれに幅、色、デザインをまとめる形で指定することも出来ます。この場合、各<値>を省略するとデフォルトが適用されますので、線種を省略してしまうと「none」が適用されて非表示になってしまうため、これに関しては必ず指定が必要です。

border-top: <太さ> <線種> <色>;

border-right: <太さ> <線種> <色>;

border-bottom: <太さ> <線種> <色>;

border-left: <太さ> <線種> <色>;

前章のex1、3、4を、この書き方でまとめて一括指定すると、以下のようになります。

p { border-top: 3px dotted red;

border-right: 5px solid #ff0000

border-bottom: 3px double #003366;

border-left: 5px dashed yellow; }

３．四辺を統一して指定する

四辺が全て同じ<値>で良い場合は、「border:　」を使って、以下のように一括指定できます。この場合も、各<値>を省略するとデフォルトが適用されますので、線種を省略してしまうと「none」が適用されて非表示になってしまうため、これに関しては必ず指定が必要です。

border: <太さ> <線種> <色>;

ex5.  p { border: 4px dotted green; }

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

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