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

　枠線の太さを指定する

■	border-width:

指定できる値

スタイルシートでの単位指定

数値にptなどの単位をつけて指定する

キーワード

thin    細い線
medium  普通の線
thick   太い線

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

枠線の太さを指定するには、border-widthプロパティを使います。
値には数値にptなどの単位を付けて細かく指定する方法と、thin（細い線）、medium(通常の線）、thick(太い線）などのキーワードをつかって大まかな設定も出来ます。
このプロパティも、値を複数設定することでボックスの上下左右の枠線の太さをいろいろ設定することが出来ます。上の表や下の例を見て参考にして下さいね。

サンプル - Microsoft Internet Explorer

thinの太さの線です

mediumの太さの線です

thickの太さのです

10ptの太さの線です

20ptの太さの線です

ソース

<HTML>
<HEAD>
<TITLE>サンプル</TITLE>
<STYLE type="text/css">
<!--
P   { border-style:solid;
      border-color:green;  }
.test1 { border-width:thin;  }
.test2 { border-width:medium;}
.test3 { border-width:thick; }
.test4 { border-width:10pt;  }
.test5 { border-width:20pt;  }
-->
</STYLE>
</HEAD>
<BODY>
<P class="test1">thinの太さの線です</P>
<P class="test2">mediumの太さの線です</P>
<P class="test3">thickの太さのです</P>
<P class="test4">10ptの太さの線です</P>
<P class="test5">20ptの太さの線です</P>
</BODY>
</HTML>

サンプル - Microsoft Internet Explorer

上下の太さがthin、左右がthick

上が5pt、右が10pt、下が5pt、左が2pt

上の枠線が20ptの太さ

左が30pt、下が、10ptの太さ

ソース

<HTML>
<HEAD>
<TITLE>サンプル</TITLE>
<STYLE type="text/css">
<!--
P  { border-style:solid;
     border-color:tomato;  }
.test1 { border-width:thin thick;  }
.test2 { border-width:5pt 10pt 5pt 2pt;}
.test3 { border-top-width:20pt; }
.test4 { border-left-width:30pt;
         border-bottom-width: 10pt;}
-->
</STYLE>
</HEAD>
<BODY>
<P class="test1">上下の太さがthin
、左右がthick</P>
<P class="test2">
上が5pt、右が10pt、下が5pt、左が2pt
</P>
<P class="test3">上の枠線が20ptの太さ</P>
<P class="test4">左が30pt、下が、10ptの太さ
</P>
</BODY>
</HTML>

HOME >>スタイルシート

次のページ >>