ホームページマスターTOPページへ
初心者の為のホームページ作成支援サイト powerd by Google
HOME >CSS一覧 >ボックス

枠線の太さを指定する

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

{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、右が2px、下が3px、左の枠線が4px


ソース

<p class="hutosa1">全ての枠線が1px</p>
<p class="hutosa2">上下の枠線が1px、左右の枠線が2px</p>
<p class="hutosa3">上が1px、左右が2px、下の枠線が3px</p>
<p class="hutosa4">上が1px、右が2px、下が3px、左の枠線が4px</p>
<p class="hutosa5">上が1px、右が2px、下が3px、左の枠線が4px</p>

外部ファイル

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>に直接記入する場合

<p style="border:1px solid;">全ての枠線が1px</p>
<p style="border-width:1px 2px; border-style:solid;">
上下の枠線が1px、左右の枠線が2px
</p>
<p style="border-width:1px 2px 3px; border-style:solid;">
上が1px、左右が2px、下の枠線が3px
</p>
<p style="border-width:1px 2px 3px 4px; border-style:solid;">
上が1px、右が2px、下が3px、左の枠線が4px
</p>
<p style="border-style:solid; border-top-width:1px; border-right-width:2px; border-bottom-width:3px; border-left-width:4px;">
上が1px、右が2px、下が3px、左の枠線が4px
</p>

■ その他の項目

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

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

CSS一覧
テキスト
イメージ
テーブル
ボックス
リンク
リスト
水平線
フォーム
フレーム
ページ全体

HOME

Copyright (C) 2003-2012 ホームページマスター All rights reserved.