HOME >> スタイルシート > 枠線の種類を指定する

　枠線の種類を指定する

■	border-style:

指定できる値

キーワードで指定

solid  double  groove  ridge
outset inset   dotted  dashed  none

値の指定方法		個別に設定するプロパティ
値が一つ	上下左右同じ設定	border-top-style	上のみ設定
値が二つ	上下、左右の設定	border-left-style	左のみ設定
値が三つ	上と左右と下の設定	border-right-style	右のみ設定
値が四つ	上、右、下、左の順で設定	border-bottom-style	下のみ設定

ボックスの枠線の種類を設定するには、border-styleプロパティを使います。
枠線といえば、HTMLではTABLEタグやIMGタグにborder属性を付けて表示しましたが、このプロパティを使えば見出しや段落、そしてページ全体などにも枠線をつけることが出来ます。
スタイルシートはこのようにいろいろな所に枠線を引けるだけでなく、枠線の種類も指定することも出来ます。
例えば、値にdoubleを指定すると二重線の枠線を引くことも出来ます。枠線の種類は下の例を参考にして下さい。

次に値の設定方法ですが、指定する値の数によって枠線の設定内容が変わります。
もし、値を4つ指定した場合は、最初の値で上の枠線の種類を設定し、次の値で右の枠線、その次の値で下の枠線、最後の値で左の枠線をそれぞれ設定します。
このように、複数の値を設定する場合はそれぞれを半角のスペースで区切って下さい。

また、枠線の種類を上下左右、それぞれを設定するプロパティもあります。
border-styleプロパティとよく似ていて、border-top-styleのように枠線の設定をしたい場所のキーワード(-top)を、border-styleプロパティに付けたします。この場合は、ボックスの上側だけの枠線を設定することが出来ます。

サンプル - Microsoft Internet Explorer

solidです

doubleです

grooveです

ridgeです

outsetです

insetです

dottedです

dashedです

ソース

<HTML>
<HEAD>
<TITLE>サンプル</TITLE>
<STYLE type="text/css">
<!--
P{ border-width: 2pt  ;
   padding:4px;        }
BODY  {background-color:#99cc00;}
.test1 { border-style: solid;   }
.test2 { border-style: double;  }
.test3 { border-style: groove;  }
.test4 { border-style: ridge;   }
.test5 { border-style: outset;  }
.TEST6 { border-style: inset;   }
.TEST7 { border-style: dotted;  }
.TEST8 { border-style: dashed;  }
-->
</STYLE>
</HEAD>
<BODY>
<P class="test1">solidです</P>
<P class="test2">doubleです</P>
<P class="test3">grooveです</P>
<P class="test4">ridgeです</P>
<P class="test5">outsetです</P>
<P class="TEST6">insetです</P>
<P class="TEST7">dottedです</P>
<P class="TEST8">dashedです</P>
</BODY>
</HTML>

HOME >>スタイルシート

次のページ >>