REDLINE MAGAZINE | hrタグの使い道を考える

hrタグの使い道を考える

このサイトの状況は段組部分の背景をそれぞれの段組をまとめているブロックの背景として表示する定番技を使っているわけだけど、floatを使っているので当然IE以外のブラウザでは背景がちゃんと縦に伸びない(伸びないっつーかそのブロックに高さがない状態になるアレね。)

解決策としてはこれまた定番の clearFIx 技で解決すればいいやと思ってたわけなんだけど、どうもOperaさんの機嫌を損ねたらしく、Operaでだけ背景が表示されないという罠に陥った。

いつもなら「しょうがないやー、brでクリアしてやるかー」なんていう発想にたどり着くわけなんだけど、br タグでクリアするってのも本当はスマートじゃないよなぁと思いとどまった。で代わりになりそうな要素を考えてて思いついたのがhrタグ。

web標準が広まってきて、「構造と見栄えの分離」ってフレーズを遂行しているわけだが、hr タグの出現率は私の場合、0に近くなっていた。hr は構造的か、見栄え要素か、と聞かれるとおそらく見栄えの分類に入る気がする。

が、もう少しよく考えてみるとhrって div や span と同類なんじゃないだろうかという発想にたどり着いた。
div も span もそれ自体に意味はない。でも今のところ内容の入ったボックスを作って見栄えを設定するのに一番適してるのはdiv だし、インラインの場合 span もそれに然り。そこにまったく構造的な意味がないかというと構造的に見栄えを整えるために必要な要素であってまったく無意味なわけじゃないぞ、と。

んじゃ hr は?となった時に同じ原理で見栄えとは別に何か意味を与えてあげればそれは単なる見栄え要素ではなくなるのではないかと。ソースだけみれば意味のない空要素ってことになるのもしれないけどcssと絡めてお前が必要なのさーとしてやればあながち意味がない事もないのかも･･･ってかなり日本語下手だな、私。

で、とりあえず hr 要素にcssでクリアを指定して、段組の最後に入れてやるとOperaさんも機嫌よく表示してくれた。んでも別に区切り線は見えなくてもいいので現状はこんな感じ。

hr.end{visibility:hidden;clear:both;}

使うだけ使って消えてくださいっていうのもなんか悪いけど、とりあえず普通には見えない感じでfloatだけクリアしてもらってる。

br と違って hr を利用した場合いいなぁと思うのはcssをきった状態でちゃんと区切りがわかるという事。実はコーディングしてた当初はフッタ部分にはバリデータ通りましたよバナーとかRSSのフィードバナーを置こうと思っていたので(今ついてないけど･･･)その辺り、肝心の内容部分とフッタのどっちでもいい感じの部分をちゃんと分けてくれるなぁなんて思っていた。

んで更に応用を考えてて、例えばよく商品案内なんかを１つの商品ごとに div でくくって左に写真、右に説明文を入れてるようなページでその div の最後にbrでクリアしているページなんかをたまに見かける。(次にくる要素でクリアするのがスマートなんだろうけど、まぁそれはおいといて。。)そういう時は clearfix技でもいいわけだけど、hr を使った方法でクリアしたらcss切っても商品ごとの区切りがわかりやすいなぁ･･･とか。いい方にばっかり考えてるけど、例えば一部のブラウザに対して cssを適用させないようにしている場合なんかはcssが適用されてない状態でも情報把握しやすいソースが必要なわけだし区切ってればわかりやすいんじゃないかと。

まぁ、そんな使い方もありましたよーというだけのお話。

※ちなみにClearFixについての説明はこちら

http://positioniseverything.net/easyclearing.html

内容はこんな感じ。

.clearfix:after {
content: "."; 
display: block; 
height: 0; 
clear: both; 
visibility: hidden;
}

.clearfix {display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

2006年09月18日 00:35 | Red | パーマリンク