CSSのみで！jQueryを使って！複数のブロック要素の高さを揃える
caraldo.net | WebとiPhoneとロードバイクが大好き！ » プログラミング » JavaScript » CSSのみで！jQueryを使って！複数のブロック要素の高さを揃える
デザインをしていると、この要素とあの要素の高さを揃えたい！ということが多々あります。
Photoギャラリーなんかで多いですかね。
複数のブロック要素の高さを揃える方法は、色々紹介されていますが、特徴を踏まえてまとめてみたいと思います。
CSSのみでブロック要素の高さを揃える
CSSのみで揃えたいというCSSマニアな方には以下がオススメです。
⇒[CSS]クロスブラウザ対応、高さの異なるカラムを揃えるスタイルシート | コリス
positionプロパティを使用して実現する方法。
単純なレイアウトには良いかも知れません。
⇒[CSS]高さの異なるカラムを揃えるスタイルシート | コリス
padding-bottom: 32768px;
margin-bottom: -32768px;
と指定してあげるやつです。
どちらもCSSのみで実現出来て素晴らしいのですが、CSSが複雑になるので、管理面で大変かなと感じました。
個人的には以下で紹介するJavaScriptを使う方が良いかなと思います。
JavaScriptを使ってブロック要素の高さを揃える
JavaScriptを使って揃えていきたいと思います。
1.heightLine.jsを使用する
まずは以下サイト内で配布されている「heightLine.js」を使用する方法。
⇒ブロックレベル要素の高さを揃えるheightLine.js[to-R]
こちらのScriptの最大のメリットはJavaScriptライブラリに依存せず、単体で動くことかなと思います。
使い方に関しては配布元に説明がありますので、そちらを参照してください。
2.jquery.flatheights.jsを使用する
これが一番のお気に入りです。
以下サイトで配布されている「jquery.flatheights.js」を使用します。
⇒jQueryでブロック要素の高さを揃えてみる - 徒書
こちらはJavaScriptライブラリjQuery.jsと合わせて使用します。
このjquery.flatheights.jsの最大のメリットは
既存のHTMLの構造を生かしつつスクリプト側で目的の要素を取得できたほうがいいのではと思いました。
という点です。
サンプルを作りましたので、動作イメージをご確認ください。
⇒jquery.flatheights.jsで高さを揃えるサンプル
↑マウスホイールでクリックすると別窓で開きます。
では、設置方法についてです。
手順1.
jquery.flatheights.jsを配布先よりDLして以下の記述をhead部分に追加します。
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery", "1.2.6");</script>
<script src="js/jquery.flatheights.js" type="text/javascript"></script>
今回はGoogle AJAX APIを使用してjQueryを読み込んでいます。
⇒関連：Google人気JavaScriptライブラリ配布開始、ネット全体でキャッシュ効果 | エンタープライズ | マイコミジャーナル
これでjQueryとjquery.flatheights.jsが読み込まれます。
3行目のパスは適宜変更してください。
手順2.
続いて、高さを揃えたいブロック要素をカンマ区切りで以下のように指定します。
jQueryのセレクタはCSSが分かる人ならなんとなくで書けるので便利です。
以下でセレクタの勉強に最適だと思われるサイトが紹介されています。
⇒jQueryのセレクタを徹底マスターするのに最適！『jQuery Selectors』 - IDEA*IDEA ～ 百式管理人のライフハックブログ ～
以上で完了です。
⇒こんな感じで高さが揃います。
簡単スマートでオススメです。
jQueryは本当便利ですね。