ダサイhrタグをキレイに装飾するためのCSSサンプル10＋5個

  • このエントリーをはてなブックマークに追加

HTMLには、文書の区切りを示すhrタグがあります。内容の切れ目や話を転換する場所なんかに使うわけですが、なかなか日の目を見ないタグでもあります。それはなぜかと言うと…

超ダサイから。

通常、hrタグを使用するとこんな感じになります。

これじゃちょっと使う気になれませんよね…。

でもこのhrタグ、CSSで装飾することができるんです！ということで、hrタグの装飾サンプルをいくつか作ってみました。

CSS：borderプロパティを使ったhrタグの装飾

まずは罫線を装飾するためのCSSプロパティ・borderを使用したサンプル。

hrタグに対する罫線は、hrタグの上下左右に引かれます。なので、太さを指定する場合、上＋下＝指定した値の倍の太さとなるので、その点にご注意を。

hrタグ装飾サンプル(1)

.hr01 {
	border:solid 3px #9cf;
}

実線に色を付けて装飾してみました。
太さ3pxを指定すると、上3px＋下3px＝6pxの高さになります。

hrタグ装飾サンプル(2)

.hr02 {
	border:none;
	border-top:dotted 4px #9cf;
}

体裁を整えるため一旦罫線を消し、その後で上罫線のみを指定してみました。

hrタグ装飾サンプル(3)

.hr03 {
	border:none;
	border-top:dashed 3px #9cf;
}

サンプル(2)と同様ですが、線の種類をドットからダッシュに替えてみました。

hrタグ装飾サンプル(4)

.hr04 {
	border:double 5px #9cf;
}

hrタグを囲むように二重線を引いてみました。

hrタグ装飾サンプル(5)

.hr05 {
	border:ridge 5px #9cf;
}

罫線を浮き出た感じに。

hrタグ装飾サンプル(6)

.hr06 {
	border:groove 5px #9cf;
}

罫線をくぼんだ感じに。

hrタグ装飾サンプル(7)

.hr07 {
	border:outset 5px #9cf;
}

罫線で囲まれた部分が浮き出た感じに。

hrタグ装飾サンプル(8)

.hr08 {
	border:inset 5px #9cf;
}

罫線で囲まれた部分がくぼんだ感じに。

hrタグ装飾サンプル(9)

.hr09 {
	border:none;
	border-top:solid 5px #9cf;
	border-bottom:solid 3px #ddd;
}

全ての罫線を消した後、上下違う色、太さの罫線を引き直してみました。

hrタグ装飾サンプル(10)

.hr10 {
	background:#69c;
	border:none;
	border-top:double 6px #9cf;
	border-bottom:solid 3px #eee;
}

背景に色を付けて、3色で装飾してみました。

CSS：contentプロパティを使ったhrタグの装飾

以下、IE8以下でご覧の場合、サンプルが表示されません。

CSSには、HTMLに文字を表示させることができるcontentというプロパティがあり、疑似要素beforeを組み合わせれば、次のような感じで装飾することもできます。

ただし、contentプロパティはIE8以下には対応していません。そのため、CSSハックを用いるなどして、IE8以下用のスタイルを定義しておく必要があります。

hrタグ装飾サンプル(11)

.hr11 { border:none; }
.hr11:before { content:'＋＋＋＋＋'; }

私が文章の最後あたりでよく使う「記号を並べる」というのをCSSでやってます。

hrタグ装飾サンプル(12)

.hr12 { border:none; }
.hr12:before { 	content:'◇ ◇ ◇ ◇ ◇'; }

記号を◇に替えてみました。

hrタグ装飾サンプル(13)

.hr13 { border:none; }
.hr13:before { content:'- - - - -8<- - - - -8<- - - - -'; }

記号を切り取り線風にしてみました。

hrタグ装飾サンプル(14)

.hr14 { border:none; }
.hr14:before { content:'*…*…*…*…*…*…*…*…*…*'; }

ちょっと凝ってみました。

hrタグ装飾サンプル(15)

.hr15 { border:none; }
.hr15:before { content:'☆ﾟ･*:.｡. .｡.:*･゜☆ﾟ･*:.｡. .｡.:*･゜'; }

さらに凝ってみましたｗ

hrタグの使いどころ

とまぁこんな感じで、何もしなければダッサイhrタグをキレイに装飾することができるわけですが、そもそもhrタグってのはどういうときに使うべきものなのか。

その辺については、こちらの記事をご参考に。

私はこれまで、文末にまとめを入れる前、見出しは付けるほどじゃないけどここで区切っておきたいなーという部分に「＋＋＋＋＋」といった感じで記号を入力してました。

が、そういう区切りの場所で使うべきHTMLタグ＝hrタグがあるわけですから、それを活用したいなーと。

とゆーことで、ウチの区切りは↑のようにしてみました。
（IEでは点線、それ以外のブラウザでは「◇ ◇ ◇」と表示されてるはずです）

あくまで区切りですからそんなに目立ってもいけないし、まぁこれまで通りテキストを表示させるのが良かろうと。

CSSが分かればいろいろ装飾できますんで、上のサンプルを参考にあれこれ試してみてくださいっ。

それにしても憎たらしいIEめ…

関連情報