<hr>要素は「罫線（けいせん）」を表示するタグですが、そのまま罫線を引くだけでは面白くないので、CSSでちょっと装飾してみることにします。
▼まずは、デフォルトで設定されていhr要素のスタイルをリセットしておきましょう。
CSSでhr要素をリセット
|
1 2 3 4 5 6 |
hr{ height: 0; /*高さをリセット*/ margin: 0; /*マージンをリセット*/ padding: 0; /*パディングをリセット*/ border: 0; /*ボーダーをリセット*/ } |
それでは見ていきましょう。
1.実線
|
1 2 3 |
hr.sample1 { border-top: 1px solid #333; } |
2.二重線
|
1 2 3 |
hr.sample2{ border-top: 3px double #333; } |
3.破線
|
1 2 3 |
hr.sample3 { border-top: 1px dashed #333; } |
4.点線
|
1 2 3 |
hr.sample4 { border-top: 1px dotted #333; } |
5.注意線
|
1 2 3 4 |
hr.sample5 { background-color: #FF0; border-top: 10px dashed #000; } |
6.点線(色あり)
|
1 2 3 4 |
hr.sample6 { background-color: #FFF; border-top: 3px dotted #ff6600; } |
7.立体線
|
1 2 3 4 |
hr.sample7 { border-top: 1px solid #333; border-bottom: 1px solid #fff; } |
8.立体線～二重線～
|
1 2 3 4 5 6 7 8 9 10 11 |
hr.sample8 { border-top: 1px solid #333; border-bottom: 1px solid #fff; } hr.sample8:after { content: ''; display: block; margin-top: 2px; border-top: 1px solid #333; border-bottom: 1px solid #fff; } |
9.立体線～破線～
|
1 2 3 4 |
hr.sample9 { border-top: 1px dashed #333; border-bottom: 1px dashed #fff; } |
10.背景画像～その1～
このパターン画像をリピートさせます。
|
1 2 3 4 |
hr.sample10 { height: 10px; background: url(../images/hr-bg1.png) repeat-x 0 0; } |
11.背景画像～その2～
このパターン画像をリピートさせます。
|
1 2 3 4 |
hr.sample11 { height: 10px; background: url(../images/hr-bg2.png) repeat-x 0 0; } |
12.影付き
|
1 2 3 4 5 |
hr.sample12 { height: 10px; border: 0; box-shadow: 0 10px 10px -10px #333 inset; } |
13.グラデーション
|
1 2 3 4 5 6 7 8 |
hr.sample13 { height: 1px; background: #bbb; background-image: -webkit-linear-gradient(left, #ccc, #333, #ccc); background-image: -moz-linear-gradient(left, #ccc, #333, #ccc); background-image: -ms-linear-gradient(left, #ccc, #333, #ccc); background-image: -o-linear-gradient(left, #ccc, #333, #ccc); } |
以上13パターンをご紹介しましたが、いざという時に使ってみてください。