横罫線のアイディア教えます！CSSで強化された8つの横罫線と仕切りの例

いくつかのデザイン要素は非常に一般的で、ほとんどは後付けです。横罫線がそれらのうちのひとつです。特に詳細に注意を払わなくてもコンテンツ内に配置するのは簡単です。

 

しかし由緒あるHTMLタグは、CSSにより多くのことができるようになります。横罫線は非常に装飾的になり得るもので、大胆なデザインでも繊細なデザインでもあなたの好みに合わせて装飾できます。これは強化されたブランディングメカニズムとしても使われ、色とロゴの要素を完備しています。

 

もしあなたがHRを次のレベルにステップアップさせたいなら、デフォルトを超えているこの一見変わった横罫線を見てみたいと思います。それでは、どうぞ！

 

HRのメジャー

この例は少し極端かもしれませんが、非常に賢いです。それは大規模な<hr>タグの複合体（全部で100個）によって定規の外観に似せています。実用的かどうかは…おそらく使えません。しかし、確かにクリエイティブですよね。

 

See the Pen
A Horizontal rule-er by John W (@Bupeldox)
on CodePen.

 

列になった罫線

このスニペットは実際の横罫線を利用していませんが、CSSによって効果を似せています。文字やその他のデザイン要素は仕切りとともに列を成して配置され、注目を集める効果を生み出しています。コードに至っても楽しくシンプルなのです。

 

See the Pen
Inline horizontal rule by Ohad (@oaviv)
on CodePen.

 

象徴的な形

繊細さがまだ際立っている証拠がここにあります。スタンダードの横罫線は図形（丸、ダイヤモンド、星など）によってさらに良いものになり、魅力的な見た目を提供します。短い罫線と明るい色を組み合わせれば、読者がいくつかのコンテンツを見分けるのに役に立ちます。

 

See the Pen
Fancy Horizontal Rules by szpakoli (@szpakoli)
on CodePen.

 

アコーディオン罫線

アコーディオンはスペースを節約できるという理由から最も有名なUI要素となりました。

この純粋なCSSの機能は、使用可能なインターフェースの一部として横罫線を含んでいます。

機能的な目的で使用されている古き良き<hr>の希少な例です。

 

See the Pen
Accordion Effect with Horizontal Rules by Will Boyd (@lonekorean)
on CodePen.

 

シンプルなスタイル変化

このスニペットはスタイルや使用場面の変化に対応できる９つの面白い横罫線を提示しています。これらはシンボルの使用、中央揃えのテキスト、色、ボーダーパターンを含んでいます。ここには全ての人のための何かがあります。

 

See the Pen
Some HR Styles by Mark Murray (@markmurray)
on CodePen.

 

アクセシビリティーのミディアムスタイル

罫線のなかに文章を配置するのは時に慎重を要します。しばしばあまり便利ではないテクニックを要するのです。このスニペットはそうではなく、<hr>タグからのコンテンツを利用しています。それはクールなミディアムスタイルを提供するだけでなく、読み手にもわかりやすいです。

 

See the Pen
Accessible Medium Style Dividers by Zoë Bijl (@Moiety)
on CodePen.

 

装飾的で最小限のデザイン

おそらくみなさんは、残りのコンテンツから気をそらさずに仕切りを素敵なものにしたいでしょう。この18個のシンプルなものはそういった方々のためのものです。その効果は派手な機能でやりすぎることなく、うまく実行されます。

 

See the Pen
18 Simple Styles for Horizontal Rules (hr CSS Design) by Ibrahim Jabbari (@ibrahimjabbari)
on CodePen.

 

チャーリーブラウンのシャツかバートシンプソンの髪か？

このジグザグ模様を見たとき、一つは漫画キャラクターをイメージさせます。しかし、これもまた巧妙なコードなのです。角度を付けたCSSの傾斜とふたつの<hr>タグを組み合わせです。それでは、どのキャラクターを最もよく表しているでしょうか？バートの髪からいってみましょう！

 

See the Pen
Zigzag Horizontal Rule by m0cha (@m0cha)
on CodePen.

 

（水平方向の）分割統治

デフォルトの横罫線でも仕事はできます。しかし、何が楽しいでしょうか？上記の例からヒントを得て、素晴らしいデザイン作業を補完する何かを作り出してください。

 

もっとインスピレーションが必要？CodePen collectionをクリックして、他のスニペットもチェックしてみてくださいね。