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

point 枠線の種類を指定する

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
ホーム(H)メニュー(M)戻る(B)進む(N)

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> 
Copyright ©2001〜2011 まさぼ〜 All Right Reserved