区切り線・水平線をおしゃれにするCSSスニペット10選。hrタグ要素だけじゃない！
スタイリッシュなデザインの区切り線・水平線（hrタグ）のCSSサンプルをまとめました。
デザインが美しいウェブサイト・ブログが増えています。フォーム周りのデザインも趣向を凝らしたものが多く見受けられるようになりました。目を引くデザインのメニューは利用者の興味を引き付けます。
文章やコンテンツの区切りでつかわれるhrタグ。文章をたくさん扱うサイトなどでは、利用するユーザにとってもひと目で区切りがわかるので、とても重要です。
一方でhrタグは仕様上シンプルになりがち。カッコいいデザインにするために、hrタグ以外を使って水平線を表現しているサイトも多く見受けられます。本記事ではフォームの中でも「区切り線・水平線」に焦点を当て、おしゃれなCSSスニペットを一覧にしてみました。
まずは基本！シンプルでわかりやすいhrタグ要素のCSSデザイン例。
基本的なhrタグのバリエーション一覧 その①
See the Pen
18 Simple Styles for Horizontal Rules (hr CSS Design) by Ibrahim Jabbari (@ibrahimjabbari)
on CodePen.
こちらのサンプルは基本的なhrタグのバリエーションの一覧になっています。通常の横線から、点線、二重線、影を付けた線、切り取り線、等。
特にこだわらないなら、この簡単な基本形の中から選べばよいでしょう。
hrタグは基本的に仕様上シンプルになりがちで複雑な装飾は難しいことが多いです。シンプルな形のまま、どのような表現ができるのかが分かりやすいので、非常に参考になります。
基本的なhrタグのバリエーション一覧 その②
See the Pen
Collection of horizontal rule styles. by Zachary Minner (@1forh)
on CodePen.
こちらも通常の横線、点線、二重線、影付き、グラデーション等、hrタグの基本的をまとめたものですが色付きとなっています。
通常のhrタグを少しだけ改変したい場合は「色」や「太さ」 をCSSで指定して調整してみましょう。
３つの点のみで区切りを表現
See the Pen
Super Simple Horizontal Rule by Shane Murphy (@shanomurphy)
on CodePen.
こちらのデザインは３つの点のみで区切りを表現しています。シンプルで見やすいです。
区切り線・水平線というと長い横線を想像する人も多いですが、段落の区切りが分かりやすく表現できればOKなので、このような手法もアリですね。
なおCSS上はcontent: '•••’となってますので、中身の文字を変更すれば●の数を変更したり◆に変更したりすることも可能です。
hrタグの上にワンポイントの画像アイコンを乗せたデザインサンプル
See the Pen
Horizontal Rule with Font Icons by Jeff Kinley (@jkinley)
on CodePen.
こちらは通常のhrタグの上にワンポイントのアイコンを乗せたデザインサンプルです。
非常にシンプルなのですが、アイコンが乗っているだけで、だいぶイメージが変わりますね。
なお、本サンプルは、Font AwesomeをCSSのcontentプロパティで使用していますので、他のアイコンに変更することも可能で、応用が効くデザインです。
区切り線・水平線はhrタグだけとは限らない。h1、h2などの見出しタグ、pタグを改変しても横線は実装できる。
見出しタグ（h1、h2）、段落タグ（p）を区切り線として使ったサンプル
See the Pen
Inline horizontal rule by Ohad (@oaviv)
on CodePen.
実は、区切り線・水平線はhrタグを使わなくても実装可能です。
こちらは見出しタグ（h1、h2）、段落タグ（p）をCSSでデザイン調整して、区切り線として使っているサンプルです。
文字を上手く載せて区切りとしたい場合や、見出しタグの配置と合わせて区切り線としても兼ねさせたい場合に最適です。
囲み枠の見出しが区切り線を兼ねているサンプル。
See the Pen
Box & Line titles by Rik Kendell (@Rikki_Sixx)
on CodePen.
こちらも見出しタグを区切り線としても使っているデザインサンプルです。
シンプルですが文章の区切りがしっかり分かるので見やすくて良いサンプルです。
hrタグと同じデザインにpタグを調整
See the Pen
Keylines by Joe Bell (@joebell)
on CodePen.
通常のhrタグと全く同じデザインで、文字を乗せた区切り線をpタグで実装しているデザインサンプルです。
文字無しの区切り線と文字有りの区切り線を併用したい場合に参考になるアイデアです。
奇抜な見た目・動きが特徴的！スタイリッシュな区切り線・水平線。
ファンシーな雰囲気の区切り線
See the Pen
Fancy <hr> (Horizontal Rule) by Shane Murphy (@shanomurphy)
on CodePen.
形や色遣いがファンシーな雰囲気の区切り線で、非常にスタイリッシュですね。
まるで、ファンタジー小説の物語のあらすじなどで出てきそうな区切り線です。
ホラーな雰囲気の区切り線
See the Pen
SVG spider web horizontal rule by Shopify Partners (@ShopifyPartners)
on CodePen.
こちらは蜘蛛の巣がくっついた区切り線です。
ホラーやお化け屋敷、ハロウィーンのサイトに使うと合いそうです。
微妙に動いている虹色区切り線
See the Pen
Rainbow Horizontal Rules by Adrian Redman (@marblegravy)
on CodePen.
7色のレインボー区切り線なのですが、微妙にアニメーションで動いていますね。
実用性は低いかもしれませんが、遊び心があって楽しいデザインサンプルです。
ウェブサイトのフォームをおしゃれにするCSSスニペットシリーズ記事一覧
フォームの各入力要素のスニペットはシリーズ記事化していますので、こちらの記事も参考にしてください。
https://kodocode.net/design-css-textbox/
