まずはサンプル集をどうぞ
今回、紹介するhrのデザインは以下のリンクにまとめておきました。まずはどんなデザインが作れるかチェックしてみてください。 CSSで作る「区切り線」サンプル集 それでは、それぞれのデザインを解説していきますね。まずはCSSをリセット
hr要素は、そのままだとブラウザごとのスタイルが適用されてしまいます。以下のCSSをあててリセットしておきましょう。
1 2 3 4 5 6 |
hr { height: 0; margin: 0; padding: 0; border: 0; } |
1 |
<hr> |
01:シンプルなボーダー

1 2 3 |
hr { border-top: 1px solid #ccc; } |
02:点線

1 2 3 |
hr { border-top: 1px dotted #ccc; } |
03:破線

1 2 3 |
hr { border-top: 1px dashed #ccc; } |
04:二重線

1 2 3 |
hr { border-top: 3px double #ccc; } |
05:背景付きの破線

1 2 3 4 |
hr { border-top: 2px dashed #9dd1ff; background-color: #56b0ff; } |
06:立体線(凹)

1 2 3 4 |
hr { border-top: 1px solid #ccc; border-bottom: 1px solid #fff; } |
07:立体線(凸)

1 2 3 4 |
hr { border-top: 1px solid #fff; border-bottom: 1px solid #ccc; } |
08:グラデーション線

1 2 3 4 5 |
hr { height: 1px; background-image: -webkit-gradient(linear, left top, right top, from(transparent), color-stop(#ccc), to(transparent)); background-image: linear-gradient(to right, transparent, #ccc, transparent); } |
09:斜めの線

1 2 3 4 5 |
hr { height: 8px; background-image: repeating-linear-gradient(45deg, #ccc 0, #ccc 1px, transparent 0, transparent 50%); background-size: 8px 8px; } |
10:網掛け風

1 2 3 4 5 |
hr { height: 8px; background-image: repeating-linear-gradient(45deg, #ccc 0, #ccc 1px, transparent 0, transparent 50%), repeating-linear-gradient(135deg, #ccc 0, #ccc 1px, transparent 0, transparent 50%); background-size: 8px 8px; } |
11:見出し文字つき線

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
hr { border-top: 1px solid #ccc; height: 1em; text-align: center; overflow: visible; } hr::after { content: "NEWS"; background: #eee; color: #ccc; display: inline-block; height: 2em; line-height: 2em; position: relative; top: -1em; padding: 0 1em; } |
12:キリトリ線

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
hr { border-top: 1px dashed #ccc; height: 1em; text-align: center; overflow: visible; } hr::after { content: "\002702"; background: #eee; color: #ccc; display: inline-block; height: 2em; line-height: 2em; position: relative; top: -1em; padding: 0 0.5em; } |