HTMLで区切り線を引く方法とデザインをおしゃれにするやり方を解説！
HTMLで区切り線を引く方法とデザインをおしゃれにするやり方を解説します。HTMLで区切り線は何かとよく使いますが、CSSなどでデザインしないと質素なものとなってしまいます。ここでは区切り線を引く方法だけでなく、デザインする方法も解説します。
HTMLで区切り線を引く方法
まずHTMLで区切り線を引く方法について解説します。区切り線を引く方法としては実は簡単で、区切り線を引きたい場所にhrタグを挿入すればいいだけです。
では実際にサンプルコードを用いて挙動を見てみましょう。
このようにhrタグによって水平線が引かれていることが分かります。ただこれだけだととてもデザイン的に簡素です。
そこで少しでも目立たせるために以下の項目でCSSでデザインした区切り線を紹介します。
区切り線のデザインをおしゃれにする
区切り線のデザインをおしゃれにする方法について紹介します。
ちなみに以前までhr要素で指定できたsize、width、noshade、alignの属性によって、区切り線を多少デザインすることは可能でしたが、HTML5で廃止されたため、これからはCSSでデザインする必要があります。
では以下でいくつか例を紹介します。
二重線を引く方法
方法としてはhr要素にborder-topで太さ(px)とdoubleを適用するのみです。
では実際にサンプルコードを用いて挙動を見てみましょう。
このように二重線が引けていることが分かります。
破線を引く方法
次に破線を引く方法について紹介します。破線を引く方法はhr要素にborder-topで太さ(px)とdashedを適用します。
では実際にサンプルコードを用いて挙動を見てみましょう。
このように区切り線が実線ではなく破線となっていることが分かります。
影を付けた線を引く方法
影を付けた線の引き方について簡単に解説します。
hr要素にborderがあると囲み線が出てしまうので、border:none;とします。
そしてbox-shadowで好みの影の位置や太さ(px)や色を設定し、insetを適用します。
では実際にサンプルコードを用いて挙動を見てみましょう。
このように影が付いた線を引くことができます。
擬似要素を用いた区切り線
擬似要素を用いることで、単純な線ではなくもう少しデザインが凝った複雑な事もできるという紹介をします。
では実際にサンプルコードを用いて挙動を見てみましょう。
hrの::afterの疑似要素で記号の§を表示し、角度を少し変えています。この記号を中央に配置しています。
このように擬似要素を用いると少し異なるおしゃれな区切り線を引くことができます。
まとめ
いかがでしたでしょうか？
単に区切り線を引くだけではなくて、ここで解説したような手法を用いたり、または独自でデザインして、おしゃれな区切り線をぜひ活用してください。
