ブロック要素の高さを揃える（レスポンシブ対応）＠jQuery

ブロック要素の高さを揃える（合わせる）のに大変便利、重宝しているjQueryのライブラリです。

＊to-Rさんのこちらで詳しく紹介されています

blog.webcreativepark.net

すでに多くの紹介記事がインターネット上にはあるので「今更」感はありますが、自分用の備忘録ということと、あらためて感謝の気持ちで。

このようなデザインはよくあります。パネル状というか、タイル状（数年前にいっとき爆発的に流行したmasonryとか思い出します）にしきつめるデザインですね。

これを実現するには、各要素のタイトル名や抜粋文等、文量の多い少ないを考慮して実装する必要があります。この例ではタイトル、抜粋文は文字数を丸めて三点リーダーをつけることで対応しますが、タグ部分はそれでは対応出来ません。一行に収まるよう、運用側で吸収するのが確実ですが、それはそれで窮屈ですし、クライアントさんに納品するにあたってはなおさらです。

そこで、このレイアウト崩れの原因となっているタグ文字列部分の要素の高さを合わせます。前述のto-Rさんが公開、配布してくださっているJavaScript(jQuery）ライブラリを使って。

使い方 jQueryライブラリなので、まずjQueryを読み込みます。この記述例ではAPIを介して最新のjQueryを読み込むようになっていますが、ケースによっては不具合が発生することもあるので、そこは適宜、ケースバイケースで適したjQueryを読み込むようにします。

そして、肝心のto-Rさんのライブラリを読み込みます。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="jquery.heightLine.js"></script>

これでこのライブラリを利用できるようになっていますので、あとは実際に高さを揃えたい対象を指定します。

<script>
    // 高さを揃える
    jQuery(function() {
        jQuery(window).on("load",function(){
            jQuery(".home_small_unit ul").heightLine({
                minWidth:740 // ウィンドウ幅740px以上の場合に高さを揃える
            });
        });
    });
</script>

この例ではclass名がhome_small_unitの子要素であるul要素の高さをあわせる（一番高さを確保しているものに）ように指定しています。これを適用すると、このように高さが揃うようになります。

この例では、オプションも指定しています。

PCやタブレットでの表示と違い、スマートフォンではシングルカラムにした場合、この「高さを揃える」必要はなくなりますので（むしろデザイン、レイアウト的にいびつになる）、閲覧している環境のウィンドウ幅を指定し、それ以上（例えばタブレット以上、PC向けを指定）では、この「高さを揃える」機能は動作しないようにしています。

詳しくは元記事のto-Rさんにありますが

maxWidthオプション

これはウィンドウ幅（閲覧者の）が640px以下の場合を指定しています。

<script>
$(".parent child").heightLine({
    maxWidth:640
});
</script>

minWidthオプション

これはウィンドウ幅（閲覧者の）が640px以上の場合を指定しています。 今回の例でもこのオプションを指定しています。これが多いケースじゃないかなと思います。

<script>
$(".parent child").heightLine({
    minWidth:640
});
</script>

maxWidthオプション / minWidthオプション

ウィンドウ幅の上限と下限を決めて指定する例です。前述のオプションを併記するんですね。あまり使うケースはなさそうですが、こういったところも考慮してくださっているのがありがたいです。

<script>
$(".parent child").heightLine({
    maxWidth:700,
    minWidth:500
});
</script>

この他にもいくつかオプションもありますし、元記事を読んでいただくのがより安心かと思いますので、ご使用の際にはこちらを参照ください。

blog.webcreativepark.net