https://hmaster.net/


HTMLタグとCSSを使いメモ帳だけで無料でホームページを作成する 方法を分かりやすく解説しているサイトです。 初心者向けに見やすい、読みやすい作りになっています。

枠線の種類を指定する

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

■ 枠線の種類の指定方法

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

枠線の種類の指定 説明
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本線、右が突出した線、下が二重線、左が点線


ソース

<p class="sen1">上下左右 全て1本の線</p>
<p class="sen2">上下が大きめの点線、左右が二重線</p>
<p class="sen3">上が山形、左右が谷型、下が窪んだ線</p>
<p class="sen4">上が1本線、右が突出した線、下が二重線、左が点線</p>
<p class="sen5">上が1本線、右が突出した線、下が二重線、左が点線</p>

外部ファイル

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

<p style="border-width:3px; border-style:solid;">
上下左右 全て1本の線
</p>
<p style="border-width:3px; border-style:dashed double;">
上下が大きめの点線、左右が二重線
</p>
<p style="border-width:3px; border-style:ridge groove inset;">
上が山形、左右が谷型、下が窪んだ線
</p>
<p style="border-width:3px; border-style:solid outset double dotted;">
上が1本線、右が突出した線、下が二重線、左が点線
</p>
<p style="border-width:3px; border-top-style:solid; border-right-style:outset; border-bottom-style:double; border-left-style:dotted;">
上が1本線、右が突出した線、下が二重線、左が点線
</p>

このエントリーをはてなブックマークに追加 Instagram

■ その他の項目

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

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