コンテンツの高さを揃える「fixheight.js」

コンテンツの高さを揃えたい時に便利！

Webページを作成していて3カラム、2カラムなどの複数列にコンテンツを配置する事がありますよね。
1行であればそこまで問題になりませんが、2行3行と複数行になっていくとコンテンツの高さが揃わない事が原因で表示が崩れる事もあるはずです。

こんなとき、tableで配置したり、一行毎にclearを入れたりして何とかするわけですが、ショッピングカートなどソースを自動生成してコンテンツが追加されるページの場合、特定の場所だけにclearを入れる事は難しいですよね。レスポンシブWEBデザインならなおさらです。

でもそんな難題も簡単に解決する事ができるんです。そう、JavaScriptならね。

fixheight.jsを使って高さを揃える！

使うのはfixheight.js（ダウンロード：http://www.starryworks.co.jp/blog/tips/fixheightjs.html）というjQueryです。
それからjquery.js（ダウンロード：https://jquery.com/）も必要なので、最新版をダウンロードしましょう。

続いてHTMLに記述していきます。

高さをそろえたい部分の親要素にfixHeightのclassを指定します。
Hは大文字なので注意が必要です。
これだけで要素の高さが揃っちゃいます。とても簡単ですね。

例のHTMLだと、liに「style=”height:00px;”」と高さを指定するCSSが入ります。
一番高い要素に合わせて設定されるので、表示が崩れたりしなくなるわけです。
しかも1行毎に高さを見て設定してくれるので、見た目も綺麗に揃えてくれます！賢いですね！！

孫要素の高さを揃える場合

例えば下記の例でdiv要素の高さを揃えたい場合・・・ありますよね。
そんな時は先ほどの記述だけではできません・・・続けて他のclassを付ける必要があります。

高さを揃えたい部分にfixHeightChildを付けます。
HとCが大文字ですので、注意してくださいね。
これで「fixHeightChild」で設定した部分の高さが揃います。

複数の孫要素の高さを別々に揃える場合

複数の孫要素を格納していて、それぞれの高さを揃えたい場合・・・こちらの利用頻度も高いですね。
先ほどと同じく要素事に「fixHeightChild」を付けてもきちんとそろってくれません・・・
更に記述を細かく分けていく必要があります。

このように「fixHeightChild」に続けて、それぞれ揃えたい要素毎に記述を増やします。
例文では「H2」とか「DIV」とか、HTML要素を大文字で指定していますが、決めごとはありません。
揃える要素毎に名前が変われば動作してくれます。

レスポンシブWEBデザインに対応するには

このfixheight.jsはページが読み込まれた時に各要素の高さを取得してきて、要素毎にheightを付けていきます。
なのでPCで見ていて、画面幅を縮めたり広げたりしてコンテンツの幅が変わり、要素に入っている文字が押されて高さが変わってもheightの値が変わってくれません。

ページを読み込んだ時点で高さが取得できるなら、モバイルで見た時に画面幅が固定になっているから別に問題ないのでは？と思ってしまいますが、モバイルは傾けた時に画面が縦横で切り替わりますよね。
その動作があった時、コンテンツ表示が崩れてしまうんです・・・コマッタ・・・

でもそんな時は画面幅が切り替わった時に再読み込みさせてあげればいいんです！

fixheight.jsの下部にあるコレ

jQuery(document).ready(function(){
$(“.fixHeight”).fixHeight();
});

この部分をつけ足してあげればいいわけですね。
ページ幅が変わる度にfixheight.jsを動かして、値を再計算させてあげるので、

$(window).on(‘load resize’, function(){
var w = $(window).width() * 1.05;
$(“.fixHeight”).fixHeight();
});

こんな感じですね。
これを書き足しちゃってみてください。
きっと動くはずです。

高さがうまく揃わない時には

テキストだけで構成されているコンテンツの高さを揃える場合には問題になりませんが、画像がある場合・・・
この場合には高さがうまく揃わない事があります。

何故か・・・
それはページ読み込みの開始時にfixheight.jsが動いているからです。

実はページを読み込み開始時には文字から読み込まれます。続いてimageが当てはまるような順番ですかね。
img要素にheightを設定してあれば、文字で高さが何pxなのかが書いてあるので理解してもらえますが、省いている場合・・・最初の段階で画像の高さがどのくらいあるのかが分かりませんよね。なので高さが0として扱われてしまうんです。
そうなると各要素に入る画像の高さが均等でなかった場合、fixheight.jsが動作する時に取得できる値と、実際に画像が入った時の高さが変わってきますよね。
それによって表示がうまく揃えられないんです。

これも困りますね。
img要素にheightを設定すると、メンテナンス性が落ちてしまいます。しかもレスポンシブWEBデザイン向きでもありません。
そんな時には、fixheight.jsの動作順を、ページが完全に読み込まれてから動作するようにしてしまえばいいんです！

またしてもfixheight.jsの下部にあるコレを見てください。

jQuery(document).ready(function(){
$(“.fixHeight”).fixHeight();
});

このままではいけないので、このように書き直します。

$(window).load(function(){
$(“.fixHeight”).fixHeight();
});

書き直す前は「ページ読み込み開始時」に動作するように書かれており、
書き直した後は「ページが読み込み終了時」に動作するように書かれています。

これで高さがきちんと取得されるはずですので、試してみてください。

まとめ

・fixheight.jsを使って、要素毎の高さを取得して表示崩れを回避できる
・設置はfixheight.jsとjQueryを読み込ませて、揃えたい要素の親要素に「class=”fixHeight”」を設定する
・孫要素を揃えたい場合は「class=”fixHeightChild”」
・複数の要素を揃えたい場合は「class=”fixHeightChild任意の文字列”」