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

point 枠線の太さを指定する

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

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

上下の太さが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> 
Copyright ©2001〜2011 まさぼ〜 All Right Reserved