レスポンシブで横並びカラムの高さを揃える

Writer:Asai (20.09.11)

jquery.matchHeight.jsを使い、レスポンシブでもカラムの高さを揃えていきます。jquery.matchHeight.jsを選択する大きな理由は、列(横並び)でカラムの高さを揃えられるという点です。
全ての高さを揃えてしまうと、スマホサイズの時に間延びしたカラムが生まれる可能性があるためです。

目次【非表示】

サンプルソースと事前準備
jquery.matchHeight.jsの設定
ブレークポイントの設定

サンプルソースと事前準備

このように高さが揃っていないカラムは不格好です。そこで、jquery.matchHeight.jsを利用してカラムの高さを揃えていきます。

jquery.matchHeight.jsのダウンロード

jquery.matchHeight.jsは下記のサイトからダウンロードできます。

jquery.matchHeight.jsダウンロード

ダウンロードが完了したら、コードを記述します。

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.matchHeight.js""></script>

jquery.matchHeight.jsの設定

コードを記述したら、高さを調整する記述を行います。基本は下記のコードです。

$(function() {
	$('div.pattern1-1-1-1 div.col').matchHeight();
});

この記述を行うことで、高さを揃えることができます。また、jquery.matchHeight.jsは列(横並び)でのカラムの高さを揃えることができます。その場合は、下記の様にコードを記述します。

$(function() {
	$('div.pattern1-1-1-1 div.col').matchHeight({column:4, clear:1});
});

上記のcolumnの数字を変更することで、カラムの数が調整できます。

ブレークポイントの設定

最後にjqueryでブレークポイントの設定を行います。ブレークポイントの設定については、「jQueryでレスポンシブのブレークポイントを設定する」の記事を参考にしてください。

$(function(){
	if (window.matchMedia('(max-width: 668px)').matches) {
		$('div.pattern1-1-1-1 div.col').matchHeight({column:2, clear:1});
	} else if (window.matchMedia('(min-width:669px)').matches) {
		$('div.pattern1-1-1-1 div.col').matchHeight({column:4, clear:1});
}})

このように、列(横並び)でカラムの高さが揃うので、スマホサイトでも間延びせずにキレイなレイアウトを実装することが可能です。