
こんにちは!WEBデザイナーのこたです。
ブログ記事を書いているときに区切り線を引きたいときはありませんか?
コンテンツとコンテンツの間に区切り線を引くことで、見てくれるユーザーにより見やすなるようにすることができます。
では、区切り線を引くにはどうすればいか?
簡単な内容なので、ぜひ覚えておきましょう!
区切り線をひこう
コンテンツの途中で区切り線を引くには、要素に上ボーダーを設定する方法などいろいろあります。
その中で最も簡単に実装できる方法は「<hr>」タグを使う方法です。
使い方は簡単で、区切り線を引きたい場所に「<hr>」タグを追加するだけです。
注意点「<hr>」タグには「</hr>」タグは必要ありません。
See the Pen
Untitled by こた@WEBデザイナー (@kota_webdesign)
on CodePen.
区切り線のスタイルを変更したい
区切り線の「<hr>」は、デフォルトだとシンプルな黒線になります。
これでは寂しい印象を受けますね。
もちろん「<hr>」にもCSSでスタイルを変更することは可能です。
「<hr>」のスタイルを変更するには、どんな見た目にする場合でもまず「border:none;」を適用して、デフォルトのCSSをキャンセルしなければいけません。
See the Pen
Untitled by こた@WEBデザイナー (@kota_webdesign)
on CodePen.
区切り線の途中でテキストを表示したい
区切り線のデザインアイデアとして、少し特殊なCSSテクニックを紹介します。
今回は区切り線を点線にして、その線の真ん中にテキストを表示する方法についてです。
セレクタが「hr:before」のスタイルに含まれるcontentプロパティの値を変えれば、線の真ん中に表示されるテキストを自由に設定できます。
See the Pen
Untitled by こた@WEBデザイナー (@kota_webdesign)
on CodePen.
区切り線をグラデーションで表示したい
区切り線のアイデアとしてもうひとつご紹介します。
それは「線をグラデーションで表示する方法」になります。
結構いろんなサイトで見かけるデザインテクニックなので、覚えておくといいかもしれません。
See the Pen
Untitled by こた@WEBデザイナー (@kota_webdesign)
on CodePen.
まとめ
いかがでしょうか?
「<hr>」は簡単かつ、デザインの応用も効く便利なタグになります。
ブログ記事の途中に設定する際にも活用できるので、ぜひ使用してみてください!