ブロック要素の高さを揃えるjQueryプラグイン

まとめ

テーブルレイアウト・イズ・デッド

ここ数回のエントリーでリキッドレイアウトなどの段組レイアウトを取り上げましたが、太古の昔、Webページの段組にはtableタグが使われていました。CSSが使われる以前の話です。
現在はどのWebの教科書を見てもそんな書き方は載っていないと思います。
その後,floatを使って段組のレイアウトが主流になり、モダンブラウザが普及したこともあって、
前回のエントリーで取り上げたCSSプロパティ、

display: inline-block;

が増えてきているようです。
ただこれらのスタイルにはない利点がtableにはありました。
それは隣り合ったボックス(tableの場合はセルですが)の高さが必ず揃うということです。
ブロック要素を横に並べた場合、各ブロックのコンテンツの高さが同じであるか、heightで同じ高さを指定する必要があります。
これではいつでも高さを揃えるのは難しいですね。
文書構造的にはNGなのでしょうがtableタグを使いたくなる人もいるかもしれませんね。

高さを揃えるにはjQuery

いつでも高さを揃えるためにはスクリプトの出番になります。
そこでブロック要素の高さを揃えてくれるjQueryプラグインを集めてみました。

・matchHeight

レスポンシブにも対応した多機能なプラグイン。著名な企業でも採用されているそうです。

使い方はこちら
作者のページ(英語)
ダウンロードはこちら

・jQuery.lineUp

jQueryを呼び出すscriptタグに属性を追加することにより、1行ごとに高さを揃えることができるそうです。

使い方はこちら
作者のページ

・jQuery-fixHeightSimple

レスポンシブ対応しています。
「カラム数を自動で計算し、そのときの行ごとに高さを揃えます。」だそうです。

使い方(作者のページ)、ダウンロードはこちらから

・jquery.tile.js

パラメータに数字を設定することによりその個数ごとに高さを揃えるそうです。

使い方はこちら
ダウンロードはこちら

いくつかピックアップしてみましたが、他のプラグインの相性や、読み込み速度など比較して使ってみたいと思います。

ブロック要素の高さを揃えるもう一つの方法

と、ここまでjQueryプラグインを紹介してきましたが、CSSでも高さを揃えられるものがあります。
以前、リキッドレイアウトで紹介したフレックスボックスです。
これならCSSだけでも、高さが揃えられるすぐれものです。
ただ一般的な方法なのかが分からないんですよねえ。
一体いつが使いどきなんでしょうね?

(N.A.)

コメント