要素の高さを揃えるいろいろ
月曜日, 1月 18th, 2010明けましておめでとうございます。ここのところ所持品が色々と故障している中尾です。
遅くなりましたが本年もWeb&Peaceをよろしくお願いします。
新年早々JQueryが1.4にバージョンアップしました！更にスピードアップとのこと。改善されたパフォーマンスをここまで視覚的に訴えられると、試したくて仕方がありません。特設サイトも展開しているようですね。近頃は書籍などからも軽量化・高速化の波を肌で感じております。早速導入です。
さて、本日は要素の高さを揃えるいろいろの話です。要素を横並びにfloatさせた場合に高さを揃えるため四苦八苦しています。高さを揃える手段は多岐に渡り存在しており、そのどれもが一長一短というところ。今回はここ最近で使用している方法を中心にご紹介いたします。
CSSのみで揃える場合：
横並びにする段組を一つの要素で囲み、囲んだ要素に背景画像を表示させることで表示では高さを揃えているように見せるテクニックを使います。
この場合、clearfixを使うなどして、親要素の高さを表示させる必要があります。また、うまくマークアップをしないと不要な要素をHTML側に加えることとなります。「要素の高さ」という文書と関係のないHTMLをどこまで許容するか・・日々精進です。
Javascriptで揃える場合：
便利なJavascriptを使用します。これらのスクリプトにはいつもお世話になっており、大変助かっています。
heightLine.jsの場合は要素にクラスの指定をする必要があるため、近頃はjquery.flatheights.jsを使わせてもらっています。このスクリプトを使えば要素指定をJS側で指定するため、HTML側を触る必要はありません。
ただし、Javascriptが無効の環境では当然のことながら動作しませんので、最低限ガタガタにならぬようCSSでmin-heightを当てます。しかしmin-heightはIE6に効果がありませんので、堂々巡りを避けるため下記のようなハックを当てることでIE6とは一応の和解としています。
他にもinline-blockを使用する方法やpaddingとmarginを極端当てる方法など、
色々とありますが、状況に応じて使い分けたいところです。