WordPressアップデートによるテーマファイル構成の不具合により、現在は仮のテーマで表示しています。
記事など読みづらいところが多々あると思いますがご了承いただけると幸いです。
鋭意修正中です…

ページ上のブロック要素の高さを揃えるjQueryプラグイン4選まとめ

Webページ作成時にリストやdivなど連続したブロック要素を並べた際に
中の要素量によって高さがまちまちになってしまった場合
個々の高さを揃えるのはCSSだけだと何かと面倒だったりします。

Webページ内に並べられたブロック要素の高さを揃えるjQueryプラグインは多々ありますが、
ここ最近新たに話題になった高さを揃えるプラグインもいくつかあったので
自分用メモとしてまとめて4つほど紹介してみます。

レスポンシブWebデザインに対応した「jquery.heightLine.js」 – to-R


レスポンシブWebデザインに対応した「jquery.heightLine.js」 – to-R

言わずと知れた「to-R」さんの「jquery.heightLine.js」ですが
先日バージョンアップによってレスポンシブ対応され
今まで以上に便利なものになりました。

オプションでは
———————————-
・maxWidthオプション
・minWidthオプション
・maxWidthオプション / minWidthオプション
・fontSizeCheckオプション
・destroyメソッド
・refreshメソッド
———————————-
などが用意されており、
高さを揃えるスクリプトを実行させる際に
任意の高さ以下もしくは以上の場合のみ揃える設定など
様々な条件設定が可能になっています。

jQuery Equal Column Heights – 2.0


jQuery Equal Column Heights – 2.0

ブロック要素の最大値に揃えるだけでなく
さまざまな設定が可能な「jQuery Equal Column Heights – 2.0」。

オプションによって、要素を指定した高さに揃えることや
アニメーション動作によって高さを揃えたりと
様々なパターンでブロック要素の高さを揃えることが可能になっていて
とても便利そうです。

jQueryAutoHeight.js – 複数のカラムの高さを最大値にそろえるjQueryプラグイン


jQueryAutoHeight.js – 複数のカラムの高さを最大値にそろえるjQueryプラグイン

該当するブロック要素の中の最大値に揃える基本動作に加えて
1行ごとの最大値に揃えることができる「jQueryAutoHeight.js」。

特定の個数の最大値で高さを揃えることができる為
1行ごと、といった揃え方ができる設定がとても便利で
以前から活用させていただいているプラグインでもあります。

レスポンシブには未対応ですが
jQueryのresizeイベントなどと併用することで
同等の動作を実装することも可能です。

jquery.tile.js


jquery.tile.js Demo page

少々古めのプラグインファイルですが
シンプルに構成されたブロック要素の最大値に揃えてくれる「jquery.tile.js」

こちらのプラグインも1行ごと(要素の数ごと)に
最大値の高さに揃えることが可能になっているようなので
便利に使えそうです。

以上4点、ブロック要素の高さを揃えることができる
jQueryプラグインの紹介でした。

以前ここでも紹介させていただた高さを揃えるスクリプト
jQueryでリストなどの高さが違う複数の要素のheight値を揃える方法 | BlackFlag
こちらでもシンプルに高さを揃えることが可能になっています。

Webページ内のブロック要素の高さを揃える際にぜひ。。。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です