[CSS] hrタグで作成する区切り線のデザインを色々と変更する方法 - YoheiM .NET

こんにちは、@yoheiMuneです。 今日は、hrタグ（水平線を描画する要素）のデザインをカスタマイズする方法をブログに書きたいと思います。 区切り線をデザインできるって最近知ってびっくりしたので、備忘録の意味も込めて(*´∇｀*) hrタグのデザインをカスタマイズする方法 hrもHTML要素の一つなので、CSSでデザインすることが出来ます。 気付いたら単純な事ですが、hrをカスタマイズする機会が無かったので、知りませんでしたw。 例えば以下のようなデザインを行うことが出来ます。 デフォルトのデザインのhr線 hr線の色を変えてみたバージョン hr線をダッシュ線にしてみたバージョン hr線を背景グラデーションを使って作ってみたバージョン hr線の背景に画像を用いたバージョン 上記のHTMLは以下のようになります。 <hr class="bar1"> <hr class="bar2"> <

[idr_zz]

線はボックスのborderで処理することが多いと思うがhrタグもいろいろ変えられるようです！ [CSS] hrタグで作成する区切り線のデザインを色々と変更する方法 @yoheiMuneさんから

[yoheiM]

hrタグのデザインカスタマイズ