余計な記述無しで要素の高さを揃えるjQueryプラグインSmartHeightLineを公開しました。
2014/12/03
HTMLコーディングをしていると必ず遭遇すると言っても過言ではない「要素の高さを揃えたい」という要望がありますよね。
要素の高さを揃えるJavaScriptライブラリといえばto-RさんのheightLine.jsおよびjquery.heightLine.jsが有名で、私も以前はよく利用させていただいていたのですが、どうしてもライブラリの仕様外の表現が求められるケースも出てくるわけです。そのニーズを満たすために何番煎じか分かりませんがSmartHeightLineというjQueryライブラリを作成したのでシェアします。まずは表示サンプルをご覧ください。
SmartHeightLineの使用感としては、to-Rさんのclass記述が必要なheightLine.jsではなく、セレクタによる指定が可能なjquery.heightLine.jsに近いものとなっています。
しかし、jquery.heightLine.jsは「高さを揃えたい要素」のセレクタを指定するのに対し、SmartHeightLineは「高さを揃えたい要素の親または先祖」のセレクタを指定するという違いがあります。例えばこんな感じです。
$(function(){
//引数は省略可能
$("ul").SmartHeightLine();
//引数を明示的に指定するとこうなります。
$("ul").SmartHeightLine({target:"li"});
});
このようにli要素の高さを揃えたい場合は親であるul要素を指定するようにします。また、複数ul要素がある場合、上記の記述をした場合は下記の図のようにグループ毎に高さが決定されます。
上記のようにグループ毎に高さを揃えるのではなく、全て同じ高さにしたい場合は下記のようにul要素の親であるdiv要素を指定します。そしてターゲットにli要素を指定します。
$(function(){
//ulの親であるdivを指定すれば全て同じ高さになる
$("div").SmartHeightLine({target:"li"});
});
何故、このような違いが起こるかはjqueryにある程度精通した人向けの解説になってしまうのですが、内部でeachメソッドを利用しているからです。親div要素は一つしかありませんので一度の処理しか行いませんが、ul要素は複数存在するため個数分ループ処理をします。その結果このような違いが生まれるのです。どちらを使うかは求められるデザインによって異なりますから用途に合わせたものを利用してください。
ちなみにtargetには親要素を基準としたセレクタを指定するようにしてください。例えば、親がul要素ならターゲットには「li」と指定すること。「ul li」や「ul > li」だと正常に動作しませんのでご注意ください。
今回の例ではul要素とli要素を使用しましたが、任意の要素を使用して頂いて問題ありません。
また、下記のように重ねがけをして複数の要素の高さを揃えることも可能です。
$(function(){
//重ねがけも可能です
$("ul")
.SmartHeightLine()
.SmartHeightLine({target:"p"});
});
この例ではli要素とp要素の高さを揃えています（※li要素とp要素の高さが一緒になるわけではありません）。詳しくはサンプルを見ていただいたほうがイメージを掴みやすいかと思います。
作業効率アップに役立つライブラリですので是非ともご活用ください！
※ちなみに表示サンプル2のSmartListライブラリは後ほど紹介しますのでお楽しみに。