hr要素のデザインサンプル 12 - NxWorld

hr要素は罫線を表示させるもので、話題を変えるときの目印となる区切り線などとして用いられます。 どのブラウザでも完璧に同じ見栄えをとなると背景画像とかがやはり手っ取り早いし無難なんですが、やろうと思えばCSSだけでも結構いろいろとできるので、備忘録兼ねてhr要素をスタイリングしたものをまとめてみました。 ここで紹介しているものは、ブラウザによっては（特にCSS3を用いているもの）ちゃんと表示されません。 また、多用する人も多いと思う破線や点線もブラウザによっては多少見栄えが違ったりするので、使用する際はあらかじめ注意が必要になります。 はじめに ここで紹介しているものは、すべてHTMLは<hr />のみです。 また、それぞれのhr要素にはデフォルトスタイルとしてあらかじめ下記のようなスタイルを指定してあります。

[nakajmg]

テクニックはとてもいいけど，セマンティック的にhrはただの水平線じゃないので使い所があってない場合はhr以外でやるのがいいと思う

[trashtoy]

HTML5の観点でマークアップするのであれば、hrを使う代わりにきちんとセクショニングすべきだと思うので、実際使う機会はなさそうだけど、テクニック自体はとても興味深い

[kanariya0922]

“border-top: 1px dashed #bbb;”

[sima-box]

html コーディング　破線　罫線　点線など

[ateitexe]

hr要素ってあんまり使ってなかったけどこれは素敵かも！

[tech-tsubaki]

border-bottomで立体的に見せる方法は目からうろこ。

[www-tmcc]

[][Pocket]

[kyaraway]

罫線でこんなにデザインが広がる！新鮮！hrタグなんてほぼ使ってなかった。

[kogepanman]

hrタグのデザイン

[vitaminsii]

使い所が見えそうで見えない・・・。

[style_blue]

そのうちなんかで使うかも。

[hiddy216]

すごいなー

[AmaiSaeta]

グラデーションみたいなのはやった事あるな。背景色付は盲点だった。その他みたいに、:afterのcontentでキャラクタ重ねるのも面白いか。hrに限らず応用効きそう。

[takahashitakashi]

色んなタイプのhrの線デザイン

[jun200]

hr要素のデザインサンプル 12 | NxWorld

[sisicom]

地味に使える素敵なボーダー

[labocho]

よいまとめ content 使うのかわいい

[hanagejet]

ボーダーの使い方

[mikakane]

HRのおすすめ

[kazuyadesse]

いろんなhr( ´ ▽ ` )ﾉ

[naoki0311]

hrタグ奥が深い…

[stakaya]

hrだけでここまでできるのか～。

[typista]

hr要素のデザインサンプル 12

[bigwest]

hrのデザイン

[ponajiro]

hr要素のデザインサンプル 12 hr要素は罫線を表示させるもので、話題を変える時の目印となる区切り線などとして用いられます。どのブラウザでも完璧に同じ見栄えをとなると背景画像とかがやはり手っ取り早いし無難なん

[peroon]

“立体線”

[warriorking]

hr要素のデザインサンプル 12 | NxWorld

[Kureduki_Maari]

hr要素のデザインサンプル 12

[sho_yamane]

いちよう

[komenokami]

“height: 0; margin: 0; padding: 0; border: 0; ”

[monbran4989]

綺麗なサイトだな・・