BLOG ブログ

> ブログ

こんにちは!浜松市在住WEBデザイナーのこたです。

コンテンツの間や文章の間に使う区切り線をご存知でしょうか?
CSSでコンテンツにborderを引く方法もあります。
しかし、wordpressの記事を更新する際には元々のCSSで設定しておく必要があります。
記事の中で例外的に区切り線を引きたいときに便利なHTMLタグがあります。

今回はコンテンツの途中に区切り線を引く方法についてご紹介いたします。

区切り線を引くHTMLタグ

コンテンツの途中で区切り線を引くには要素に上ボーダーを設定するなど色々な方法がありますが、
hrタグを使うのがおそらく一番簡単な方法になります。
使い方は簡単で、区切り線を引きたい場所にhrタグを追加するだけです。
なおhrタグには終了タグがないので注意してください。

See the Pen
jOBbVLd
by こた@WEBデザイナー (@kota_webdesign)
on CodePen.

区切り線のスタイルを変更したい

区切り線のhrは、長い文章にメリハリをつけるのに便利ですが、そのまま使うとなんだか味気ない感じになるので、デフォルトの見た目は変えたいですよね。
そんな時は、ちょっとした手間で、区切り線をいい感じにしてしまいましょう。
もちろんhrタグにもCSSを適用することはできるのですが、ちょっとしたコツが必要です。

hrのスタイルを変更するには、どんな見た目にする場合でもまず下記を設定しましょう。

border:none;

上記の様にデフォルトのCSSをキャンセルする必要がありますが、これさえ設定しておけば、おおむねどんなスタイルも適用できます。

See the Pen
qBrOqwj
by こた@WEBデザイナー (@kota_webdesign)
on CodePen.

区切り線の途中にテキストを表示したい

区切り線のデザインのアイデアとして、少し特殊なCSSテクニックをご紹介します。
「特殊」というのはここでは「方法を知らないとこんな書き方は思いつかない」という意味で、使用するセレクタやプロパティ自体はおなじみのものばかりなので安心してください。
下記のサンプルでは、区切り線を点線にして、その線の真ん中にテキストを表示しています。
セレクタが「hr:before」のスタイルに含まれるcontentプロパティの値を変えれば、線の真ん中に表示されるテキストが変わります。
また、表示するテキストの内容やフォントによっては、セントテキストの位置がずれて見える場合があります。
そのようなときは、topプロパティの値を変えて調整します。

See the Pen
qBrORbV
by こた@WEBデザイナー (@kota_webdesign)
on CodePen.

区切り線をグラデーションで表現したい

異なる区切り線のアイデアとして、線をグラデーションにする方法を紹介します。
この場合はborder-topプロパティを使うのではなく、hrタグに高さを指定して、背景にグラデーションを設定します。

See the Pen
LYWpxxd
by こた@WEBデザイナー (@kota_webdesign)
on CodePen.

まとめ

「hr要素」は区切り線という意味で覚えておくといいと思います。
使い方次第ではきれいな区切りができるので、今回の記事がブログやサイト制作で少しでもお役に立てれば幸いです。