おしゃれな区切り線（ボーダー・罫線）にする CSS デザインサンプル

2024/09/10

水平線タグ <hr> や、CSS の border をおしゃれにする CSS デザインサンプルをご紹介します。

背景色が濃い要素でさりげない演出ができるので、ぜひお試しください。

<hr> デザインサンプル

最初に <hr> のデザインサンプルです。

何も指定していないデフォルトの状態だと、少し立体的なデザインになっています（ブラウザによって見え方が異なります）。

<hr>

立体感をなくして任意のカラー（ background-color ）を指定する場合、以下のように border を削れば OK です。

hr {
	background-color: #000;
	border: none;
	height: 1px;
}

水平線を背景に埋め込んだように見せる場合、box-shadow で 1 px の白い影を追加します。

hr {
	background-color: rgba(0,0,0,.1);
	border: none;
	box-shadow: 0 1px 0 rgba(255,255,255,1);
	height: 1px;
}

背景色が濃い場合、background-color と box-shadow の値を調整してください。

hr {
	background-color: rgba(0,0,0,1);
	border: none;
	box-shadow: 0 1px 0 rgba(255,255,255,.1);
	height: 1px;
}

rgba の透過度（ 4 つ目の数値）を変更するだけなので簡単ですね。

リストタグ <ul> や <ol> の区切り線も、box-shadow を使って演出できます。

背景色が薄い場合は、以下のように指定します。

li {
	border-bottom: 1px solid rgba(0,0,0,.1);
	box-shadow: 0 1px 0 rgba(255,255,255,1);
}

背景色が濃い場合は、以下のように指定します。

li {
	border-bottom: 1px solid rgba(0,0,0,1);
	box-shadow: 0 1px 0 rgba(255,255,255,.1);
}

背景に画像を敷いたり他の色を使う場合は、border と box-shadow の透過度を調整してみてください。

<li> 以外の要素でも問題なく使えます。

ブログの装飾は、記事を読みやすくするためのものです。過度な装飾で読みづらくなってしまわないよう注意し、さりげなく演出してみてください。

ほかにも CSS デザインサンプルを紹介していますので、ご参考になれば幸いです。

瀬尾真

SEO コンサルタント

Web 歴 20 年以上の SEO コンサルタント。ライティング業務ほか、サイト制作・コンテンツ販売・メディア運営代行業務を行っています。当サイト（セオリコ）では、おもにブログ初心者向けのノウハウを配信。

ココナラでは WordPress エラー修正やハッキング修復、Search Console 分析サービスをご提供しています（年間400件以上対応）。