1. 現在位置:
  2. トップページ
  3. HP作成tips
  4. stylesheet
  5. 水平線
まとめて指定 |  背景 |  width・height |  左寄せ・右寄せ | 
水平線(hr要素)
border まとめて指定
hr {
border: 1px #ff0000 solid;
background-color: #ffdfe2;
height: 10px;
width: 400px;
}
<hr>

hr.test {
text-align: left;
margin-left: 0;
width: 300px;
border-style: dotted none none none;
border-top-width: 1px;
border-top-color: #ff0000;
height: 1px;
}
<hr class="test">

background-color 背景(色を指定)
hr {
background-color: #ff0000;
color: #ff0000; /*IE用*/
border: none; /*background-colorの枠線を消す*/
height: 3px;
}
background-image 背景(画像を指定)
hr {
background-image: url(image/00.gif);
height: 10px;
}
width 横幅、height 高さを指定
hr {
width: 80%;
height: 10px;
}
水平線の表示位置(左寄せ、右寄せ)を指定
hr {
width: 50%;
text-align: right;
margin-right: 0;
}
何も指定しない場合は中央に表示