|
{border:太さ 線の種類 線の色;} で水平線の太さ 線の種類 線の色
を指定することができます。
■ 枠線の種類
線の種類は以下の通りです。
| 線の種類 |
説明 |
| solid |
通常の線 |
| double |
二重線 |
| ridge |
山形の線 |
| groove |
谷型の線 |
| dotted |
点線 |
| dashed |
大きな点線 |
| inset |
内側にくぼんだ線 |
| outset |
外側に突出した線 |
【ブラウザ表示】
ソース
<hr class="wakusen1">
<hr class="wakusen2">
<hr class="wakusen3">
<hr class="wakusen4">
<hr class="wakusen5">
<hr class="wakusen6">
<hr class="wakusen7">
<hr class="wakusen8">
外部ファイル
hr.wakusen1{border:4px solid green; height:20px;}
hr.wakusen2{border:4px double silver; height:20px;}
hr.wakusen3{border:4px ridge red; height:20px;}
hr.wakusen4{border:4px groove blue; height:20px;}
hr.wakusen5{border:4px dotted navy; height:20px;}
hr.wakusen6{border:4px dashed purple; height:20px;}
hr.wakusen7{border:4px inset lime; height:20px;}
hr.wakusen8{border:4px outset maroon; height:20px;}
<body>～</body>に直接記入する場合
<hr style="border:4px solid green; height:20px;">
<hr style="border:4px double silver; height:20px;">
<hr style="border:4px ridge red; height:20px;">
<hr style="border:4px groove blue; height:20px;">
<hr style="border:4px dotted navy; height:20px;">
<hr style="border:4px dashed purple; height:20px;">
<hr style="border:4px inset lime; height:20px;">
<hr style="border:4px outset maroon; height:20px;">
■ その他の項目
・
水平線の横幅、高さを指定する
・
背景色や画像を指定する
・
水平線の表示位置を指定する
・
水平線の外側の余白を指定する
スタイルシート一覧のページに戻る
|
