個人的にあまりjs開発でプラグインに頼るのは好きではないのですが、このコンテンツの高さを揃えるプラグイン「matchHeight」だけは本当に便利で重宝するので、結構な頻度でお世話になっています。前からあるプラグインですが、本記事ではjQueryのプラグイン「matchHeight」の使い方についてご紹介させていただきたいと思います。ダウンロードGitHubからダウンロードすることが可能です。jQueryデモ以下のサイトでデモを確認することが可能です。Tests「matchHeight」の特徴jQueryのプラグイン「matchHeight」の特徴は大きく以下の3点です。対象のセレクタに対して1行で機能を適用可能レスポンシブWebデザインに対応ボックス内でボックス毎にグルーピングして高さ揃え対象のセレクタに対して1行で機能を適用可能プラグインを読み込んだ後は、以下のようにして簡単に高さ揃えを行いたいセレクタを指定するだけです。jQueryやjsの深い知識が無くても簡単に高さ揃えの機能を実装することができます。960px以上の場合は4カラム、それ以下の場合は2カラムにしたい、という場合も特にjs側で何か対応する必要はありません。「matchHeight」はカラム数の可変やスクリーンサイズの可変に応じて高さ揃えを実行し直すため、常に高さを揃えてくれます。私がこのプラグインを使用しているのもこの機能によるところが大きいですね。ボックス内でカラム毎にグルーピングして高さ揃えかゆいところに手が届くのも「matchHeight」のイイところです。A、B、C、Dの横並びのカラムがあったとして、AとB、CとDでそれぞれ高さを揃える必要があるようなデザインであっても、以下のようにhtmlでclassを命名するだけで簡単にカラムごとにグルーピングしたうえでの高さ揃えを行うことができます。class="col-inner"><p><strong>「data-mh="item-b"」を指定</strong><br>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p></div><!--col-inner--></div><!--col--></div><!--grid-4-->サンプルコード実際に「matchHeight」を使ってサンプルを作ってみました。ご紹介させていただくコードで以下の様な高さ揃えを実現することができます。scrict';$(function(){$('.match-height4').find('.col').matchHeight();});});※jQueryを読み込んでいる場合のスクリプトとなります解説サンプルではPCサイズ時は4カラムのグリッド構成とし、スクリーンサイズ960px以下では2カラムとなるようなcssを記述しています。上段のブロックではセレクタ「.match-height4」に対し4カラム全ての高さを揃えています。プラグインを読み込んだうえで.matchHeight()を対象のセレクタに実行させることで自動的に高さを揃えてくれます。前述のとおりカラム数やスクリーンサイズの可変によって実行し直すため、jsは本当にこれだけでOKです。下段のブロックではjsでセレクタは指定せず、htmlにてdata-mh要素を使って命名することでカラムをグルーピングすることで高さ揃えを行っています。まとめ冒頭で述べたとおりWebサイトを設計する際に極力プラグインは使わないようにしているのですが、「matchHeight」だけは本当に便利でコンテンツの高さ揃えを行う際は必ずと言っていいほど活用させていただいています。レスポンシブWebデザインでコンテンツの高さ揃えを行いたい場合は、ぜひ本記事をご参考にしていただけますと幸いです。ため、即時には反映されません。住宅ローン2019年5月7日さらに見る記事を書いている人フォローするRSSを購読するWebデザイナー/フロントエンド・エンジニアのMasaです。独学でWebデザインを勉強後Web業界へ就職し、今の会社に勤めて12年目になりました。2016年4月にマイホームを購入し、休日は芝生いじりと育児に励んでいます。