枠線の太さを指定する

{border:太さ線の種類線の色;} でボックスを作ることができます。線の色は記述しなくても枠線は表示されます。ボックスはタグ、<div>タグ、見出しタグ、タグ等で作れます。

{border:値;}または｛border-width:値;}でボックスの枠線の太さを指定できます。

それぞれの細かな指定方法は以下の表を参照して下さい。

ボックスの枠線の値はpxや% 以外にthin（細い）、medium（普通）、 thick（太い） の3種類の値でも指定できます。

■ 枠線の太さの指定方法

枠線の太さの指定方法は以下の通りです。

枠線の太さの指定	説明
border:値; border-width:値;	上下左右全ての枠線の太さを指定します。
border:値1 値2; border-width:値1 値2;	値1が上下、値2が左右の枠線の太さを指定します。
border:値1 値2 値3; border-width:値1 値2 値3;	値1が上、値2が左右、値3が下の枠線の太さを指定します。
border:値1 値2 値3 値4; border-width:値1 値2 値3 値4;	値1が上、値2が右、値3が下、値4が左の枠線の太さを指定します。

ボックスの上下左右の枠線の太さを個別に指定するパターンは以下の通りです。

枠線の太さを個別に指定	説明
border-top-width:値;	上の枠線の太さを指定します。
border-bottom-width:値;	下の枠線の太さを指定します。
border-left-width:値;	左の枠線の太さを指定します。
border-right-width:値;	右の枠線の太さを指定します。

【ブラウザ表示】

全ての枠線が1px

上下の枠線が1px、左右の枠線が2px

上が1px、左右が2px、下の枠線が3px

上が1px、右が2px、下が3px、左の枠線が4px

ソース

全ての枠線が1px
上下の枠線が1px、左右の枠線が2px
上が1px、左右が2px、下の枠線が3px
上が1px、右が2px、下が3px、左の枠線が4px
上が1px、右が2px、下が3px、左の枠線が4px

外部ファイル

p.hutosa1{border:1px solid;}
p.hutosa2{border-width:1px 2px; border-style:solid;}
p.hutosa3{border-width:1px 2px 3px; border-style:solid;}
p.hutosa4{border-width:1px 2px 3px 4px; border-style:solid;}
p.hutosa5{
border-style:solid;
border-top-width:1px;
border-right-width:2px;
border-bottom-width:3px;
border-left-width:4px;
}

<body>～</body>に直接記入する場合

全ての枠線が1px

上下の枠線が1px、左右の枠線が2px


上が1px、左右が2px、下の枠線が3px


上が1px、右が2px、下が3px、左の枠線が4px


上が1px、右が2px、下が3px、左の枠線が4px

Follow @hp_master_2003

■ その他の項目

・枠線の種類を指定する
・枠線の色を指定する
・個別の枠線を一括に指定する
・ボックスの横幅、高さを指定する
・外側、内側の余白を指定する
・背景色や画像を指定する
・背景画像の表示方法を指定する
・背景画像の表示位置を指定する
・ボックスを並べる
・はみ出る部分を表示させる
・ボックスの配置方法を指定する
・背景画像の表示領域を指定する
・枠線の4隅の角丸を指定する
・枠線の4隅の角丸を個別に指定する
・枠線の4隅の角丸を指定する
・枠線の4隅の角丸を個別に指定する

スタイルシート一覧のページに戻る

枠線の太さを指定する

{border:値;}または｛border-width:値;}でボックスの枠線の 太さを指定できます。

■ 枠線の太さの指定方法

■ その他の項目

{border:値;}または｛border-width:値;}でボックスの枠線の太さを指定できます。