Webページ内で話題が変わった時やコンテンツの区切りなどに、横線が引かれているのを見たことがあると思います。単純なようですが、横線が引かれているだけで、サイトの見やすさが格段にアップします。
そこで今回は、Webページに横線を引く方法について解説していきます。
目次
HTMLで横線を引くhrタグの使い方
HTMLでは、hrタグを使って横線を引くことができます。hrタグはタグのみで使用でき、終了タグも不要です。
|
1 |
<hr> |
上記のように記載することで、Webページに横線が引かれます。なお、HTML4とHTML5でhrタグの意味は変わりました。HTML4では「水平線の表示」でしたが、HTML5では「文書の段落の区切り」を意味するようになりました。
また、hrタグは属性を使って線をカスタマイズ可能でしたが、HTML5で廃止になりました。線のデザインを変更したい場合は、CSSを使いましょう。
CSSで横線のデザインを変更する
hrタグを使って引く横線は、CSSでデザイン変更することができます。
サイトデザインに合わせてカスタマイズしてみましょう。
横線の太さを変える
横線の太さは、heightプロパティに数値（ピクセル）を指定することで、変更できます。
See the Pen
BazqEYx by sho-go (@sho-go)
on CodePen.
線を太くするほど目立たせることができるので、使用目的に合わせて、適宜変更すると良いでしょう。
横線の長さを変える
横線の長さは、widthプロパティに数値（ピクセルまたはパーセント）を指定することで、変更できます。
See the Pen
qBNJwoN by sho-go (@sho-go)
on CodePen.
端から端まで線を引くか、両端に少し余白を持たせるかによって、与える印象はガラッと変わります。横線を引くことで、終わりを意味してしまう場合もあるので、線の長さも調整すると良いでしょう。
横線の色を変える
横線の色は、background-colorプロパティに色（カラーコードか英語表記）を指定することで、変更できます。
See the Pen
PozygRQ by sho-go (@sho-go)
on CodePen.
横線の色を変えることで、サイトデザインに合った線を引くことができるようになります。また、線の色によって与える印象や注目度が変わってくるので、使い方次第では、演出の一つとして有効に活用できます。
横線の立体感をなくす
hrタグで引かれる横線は、デフォルトだと立体感のある線です。
横線の立体感をなくすには、borderプロパティに「none」を指定します。
See the Pen
QWEZPmJ by sho-go (@sho-go)
on CodePen.
HTMLで文字に横線を引いて訂正する
HTMLで取り消し線を引く方法についても解説していきましょう。Webサイトによっては、文字の上に横線を引いて、訂正内容を明確にする演出をしているサイトもありますね。
以前であれば、取り消し線はsタグとstrikeタグを使うのが一般的でしたが、現在は非推奨のタグです。取り消し線を使う場合には、delタグかCSSを使うようにしましょう。
それでは、delタグとCSSで取り消し線を引く方法をみていきましょう。
delタグで取り消し線を引く
delタグで取り消し線を引くには、該当箇所をdelタグで囲みます。
|
1 |
<del>"取り消し箇所"</del> |
それでは、実際の実行結果を確認してみましょう。
See the Pen
LYZgvmR by sho-go (@sho-go)
on CodePen.
削除したい箇所をdelタグで囲むだけなので、気軽に使うことができますね。
CSSで取り消し線を引く
CSSで取り消し線を引くには、text-decorationプロパティに「line-through」を指定します。
|
1 |
text-decoration: line-through; |
それでは、実際の実行結果を確認してみましょう。
See the Pen
vYKVMjZ by sho-go (@sho-go)
on CodePen.
他にも、text-decorationプロパティでは、下線や上線を引いたり、線の種類や色の変更ができます。delタグに比べると、気軽さは薄れますが、線に関連する操作をまとめたいのであれば、CSSを使うと管理しやすくなるでしょう。
まとめ
今回は、Webページに横線を引く方法について解説してきました。
水平線は、hrタグを使って簡単に引くことができます。しかし、線が悪目立ちしないように、CSSでサイトデザインに合わせたデザインに変更するのがおすすめです。適宜、横線を引いてサイトの見やすさを向上させましょう。
また、文字の取り消し線を使って、訂正箇所の演出をするのも、ユーザビリティ向上のために良いでしょう。
