[CSS]hr要素をおしゃれにスタイリングする8つのテクニック

HTML5で意味的な段落の区切れに使用するhr要素をCSS3でおしゃれにスタイリングするテクニックを紹介します。もちろん、画像は一枚も使いません。

Simple Styles for Horizontal Rules

[ad#ad-2]

• hr要素をおしゃれにスタイルしたデモ
• CSS3を使った8つのテクニック

hr要素をおしゃれにスタイルしたデモ

デモページはCSS3に対応したブラウザでご覧ください。

デモページ

CSS3を使った8つのテクニック

デモページの8つの実装方法を個別に見てみましょう。

HTML

HTMLは全デモ共通で、hr要素にclass名を付与するだけのシンプルな実装です。

<hr class="style-one">

[ad#ad-2]

CSS

スタイルシートは各デモのキャプチャとともにご紹介。

繊細なグラデーションを使ったデザインです。

hr.style-one {
	border: 0;
	height: 1px;
	background: #333;
	background-image: -webkit-linear-gradient(left, #ccc, #333, #ccc);
	background-image:    -moz-linear-gradient(left, #ccc, #333, #ccc);
	background-image:     -ms-linear-gradient(left, #ccc, #333, #ccc);
	background-image:      -o-linear-gradient(left, #ccc, #333, #ccc);
}

半透明のグラデーションを使ったデザインです。

hr.style-two {
	border: 0;
	height: 1px;
	background-image: -webkit-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
	background-image:    -moz-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
	background-image:     -ms-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
	background-image:      -o-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
}

点線を使ったデザインです。
※点線（dashed）はブラウザにより見栄えが異なります。

hr.style-three {
	border: 0;
	border-bottom: 1px dashed #ccc;
	background: #999;
}

ドロップシャドウを使ったデザインです。

hr.style-four {
	height: 12px;
	border: 0;
	box-shadow: inset 0 12px 12px -12px rgba(0,0,0,0.5);
}

Cloud風のデザインです。

hr.style-five {
	border: 0;
	height: 0; /* Firefox... */
	box-shadow: 0 0 10px 1px black;
}

埋め込んだようなデザインです。

hr.style-six {
	border: 0;
	height: 0;
	border-top: 1px solid rgba(0, 0, 0, 0.1);
	border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}

両サイトをフレアにしたデザインです。

hr.style-seven {
	height: 30px;
	border-style: solid;
	border-color: black;
	border-width: 1px 0 0 0;
	border-radius: 20px;
}
hr.style-seven:before {
	display: block;
	content: "";
	height: 30px;
	margin-top: -31px;    
	border-style: solid;
	border-color: black;
	border-width: 0 0 1px 0;
	border-radius: 20px;
}

記号文字をアクセントにしたデザインです。

hr.style-eight {
	padding: 0;
	border: none;
	border-top: medium double #333;
	color: #333;
	text-align: center;
}
hr.style-eight:after {
	content: "§";
	display: inline-block;
	position: relative; 
	top: -0.7em;  
	font-size: 1.5em;
	padding: 0 0.25em;
	background: white;
}