枠線の種類を指定する

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

■ 枠線の種類の指定方法

ボックスの枠線の種類の指定方法は以下の通りです。

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

ボックスの枠線の種類を個別に指定する方法は以下の通りです。

枠線の種類の指定	説明
border-top-style:線種;	上の枠線の種類を指定します。
border-bottom-style:線種;	下の枠線の種類を指定します。
border-left-style:線種;	左の枠線の種類を指定します。
border-right-style:線種;	右の枠線の種類を指定します。

線の種類は以下の通り。

線の種類	説明/ブラウザ表示例
none	枠線無し（デフォルト）
hidden	枠線無し
solid	1本の線
double	二重線
ridge	山形の線
groove	谷型の線
dotted	点線
dashed	大きな点線
inset	内側にくぼんだ線
outset	外側に突出した線

【ブラウザ表示】枠線の細かい指定をすると下のようになります。

上下左右全て1本の線

上下が大きめの点線、左右が二重線

上が山形、左右が谷型、下が窪んだ線

上が1本線、右が突出した線、下が二重線、左が点線

ソース

上下左右全て1本の線
上下が大きめの点線、左右が二重線
上が山形、左右が谷型、下が窪んだ線
上が1本線、右が突出した線、下が二重線、左が点線
上が1本線、右が突出した線、下が二重線、左が点線

外部ファイル

p.sen1{border-width:3px; border-style:solid;}
p.sen2{border-width:3px; border-style:dashed double;}
p.sen3{border-width:3px; border-style:ridge groove inset;}
p.sen4{border-width:3px; border-style:solid outset double dotted;}
p.sen5{ border-width:3px;
border-top-style:solid;
border-right-style:outset;
border-bottom-style:double;
border-left-style:dotted;
}

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

上下左右全て1本の線


上下が大きめの点線、左右が二重線


上が山形、左右が谷型、下が窪んだ線


上が1本線、右が突出した線、下が二重線、左が点線


上が1本線、右が突出した線、下が二重線、左が点線

Follow @hp_master_2003

■ その他の項目

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

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

枠線の種類を指定する

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

■ 枠線の種類の指定方法

■ その他の項目

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