hrに装飾をして格好良く見せる為のテクニックをメモメモ…。

hrってそのまま使うとすごくダサイ…というかぼてっとした感じになってしまうんですよね。しかもよく使用するタグなので、毎回Google先生に聞いていました。

hrを格好良く見せるにはCSSで装飾するしかないんです！

Google先生に聞くくらいなら自分で使いやすいようにまとめてやるわっ！って事で作成してみる事にしました。
基本的にコピペで使えると思うので、使いたい人は是非使ってみてくださいね。

何も装飾をせずにhrを使う

html

css

まず何も装飾をせずにhrを使うとこんな感じですよね。
普通…普通ですね…最近はこのまま使う人はいないんじゃないでしょうか？

hrをcssで点線にしてみる

html

css

これはよく使うものなので覚えておくと良いかもしれないですね。
私は点線が好きなので、ちょっと可愛いデザインの時には点線をよく使います。

hrを赤色の線にしてみる

html

css

これはあんまり必要ないかもしれないですが、一応入れてみました。
赤色じゃない色にしたい時は、border-bottom: 1px solid #FF0000;の#ff0000の部分を違う色に変えればOKです。

hrを二重線にしてみる

html

css

ほとんど使わないのですが、テクニックとして載せておきます。

hrがちょっとだけ浮いた感じに見せる（立体的に見せる）

html

css

これはたまに使う事があります。覚えておくと便利かもしれませんね。

hrをCSSで見せるテクニック　まとめ

hrは装飾しないと使いものにならないという認識だったので、もっともっと沢山のテクニックがあるはず！と思っていたのですが、
実践で使うのはそんなに多くないんですよね…。

テクニックと言えるかは謎ですが、一応メモ代わりに記事にしておきました。あくまで実践で使うものだけを考えるとこんなものですかね。