matchHeightというjQueryプラグインを見つけて、使い方を調べたので、備忘録として残しておきます。
- jQueryプラグイン「matchHeight.js」の基本的な使い方
- 隣り合う要素の高さを揃える方法
- CDNを利用したmatchHeight.jsの導入手順
- 実際のコード例を通じた実装方法
matchHeighとは。
matchHeighとは、隣り合う要素の高さを揃えるためのjQueryプラグインです。
詳しく説明するよりも、動作しているところを見てもらう方が早いので、デモサイトを用意しました。
See the Pen matchHeight（要素の高さを自動で揃える） by 1buk1 (@1buk1) on CodePen.
デモサイトのjQueryが適用されていない方は、それぞれ高さが違います。
高さがばらつく原因は、文章の量です。
Heightを使って、パワープレーで揃えてもいいのですが、レスポンシブのときに文章が改行するたび、heightを調整しないといけなかったりと、めんどくさいです。
matchHeighを使えば、そういった手間からは解放されます。
matchHeighは、レスポンシブにも対応しているので、高さの調整はしなくても済みます！
matchHeighの実装方法。
matchHeighの効果がわかったところで、実装方法を紹介しておきます。
- jQueryを読み込む
- CDNを読み込む
- 高さを揃える要素を指定する
1. jQueryを読み込む
matchHeighは、jQueryを使用しますので、先に読み込みます。
<!-- jQueryの読み込み -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>2. matchHeighのCDNを読み込む
CDNを使って読み込む方が簡単ですが、ファイルをダウンロードして読み込ませることでも動作します。
どの方法でも問題はありません。
デモサイトは、CDNを使って読み込ませています。
それぞれのサイトへのリンクを貼っておきます。
高さを揃える要素を指定する。
最後は、高さを揃える要素を以下のように指定してあげます。
記述は私のデモサイトでの指定を引用しています。
<div class="float">
<div class="float_item js-matchHeight">
これは、jQuery-match-heightのテストです。
</div>
</div>
<!-- matchHeightの設定 -->
<script>$('.js-matchHeight').matchHeight();</script>“.js-matchHeight”このclassで要素を揃える高さを指定しています。
HTMLの構築で任意のクラスに変更した場合は、変更したクラスにしてください。
まとめ
matchHeighは、隣り合う要素の高さを簡単に揃えてくれるjQueryプラグインでした。
実装方法も比較的簡単に行えますが、HTMLの組み方を適当にしていいわけではなく、あくまでも高さの調整をプラグインが行なってくれるようなイメージです。
HTMLを理解せずにmatchHeighプラグインを使っても思ったように動作しませんで、ご注意ください。
最近は、flexbox使用する頻度の方が高くなっているので、flexboxを理解している人なら問題なく使えるはずです。
flexboxが使えないときなどに使ってみてください。