CSSだけで実装!区切り線(hrタグ)のデザインサンプル集まとめ

こんにちは、リョウヘイです。今回は「区切り線」の特集です。

区切り線はHTMLタグで言うと「hr要素」。本来、あまり目立たせたいわけでもなく地味なパーツではありますが、デフォルトのままだとかなりやぼったくなってしまうので注意が必要です。

CSSを使ってひと手間加えるだけでクオリティがぐっと上がるので、ぜひ参考にしてみてくださいね。

まずはサンプル集をどうぞ

今回、紹介するhrのデザインは以下のリンクにまとめておきました。まずはどんなデザインが作れるかチェックしてみてください。

CSSで作る「区切り線」サンプル集

それでは、それぞれのデザインを解説していきますね。


まずはCSSをリセット

hr要素は、そのままだとブラウザごとのスタイルが適用されてしまいます。以下のCSSをあててリセットしておきましょう。

ここからはリセット用のCSSが適用されている前提で追加のコードを紹介していきます。ちなみにhtml要素は以下のようにシンプルなhrタグのみでOKです。


01:シンプルなボーダー

まずはシンプルな一本線。コードは以下になります。


02:点線

こちらもシンプルに点線にしたもの。


03:破線

こちらは破線。


04:二重線

こちらは二重線。ここまではCSS標準で作れますね。


05:背景付きの破線

背景と破線の組み合わせです。二色のラインが作れます。


06:立体線(凹)

こちらはborder-topとborder-bottomの組み合わせ。立体感が出て高級感が出るのでおすすめ。


07:立体線(凸)

色を反転させると、凹んだデザインから簡単に盛り上がったデザインになります。


08:グラデーション線

グラデーションを使うのもきれいです。こちらはbackgroundを使ってるので、高さ(height)を指定していることに注目。


09:斜めの線

グラデーションを調整すると斜線も作れます。なかなか使いやすそう。


10:網掛け風

背景グラデーションは複数指定も出来るので、向きの違う斜線を組み合わせると網掛けのようなデザインに。


11:見出し文字つき線

こちらは疑似要素(after)を使って見出し風にしています。heightとline-heightを同じにするとテキストをぴったり縦中央に合わせることが出来ます。便利なので覚えておきましょう。


12:キリトリ線

最後はキリトリ線風。ハサミのマークは特殊文字で出てくるので、画像やwebフォントなども使わずに実装できちゃいます。


まとめ

というわけで今回は区切り線(hr要素)のデザインサンプル集でした。cssだけで出来るので、気に入ったものがあったら、サクっとコピペして使ってみてください!