レスポンシブにも利用可能、要素の高さを揃えるjquery.matchHeight.jsが便利！

ホームページの制作で任意の要素を横並びでレイアウトしたい場面は多々ありますよね。

そんな時、簡単に横並びする要素の高さを揃えるのに便利なjQueryプラグインがjquery.matchHeight.jsです。

要素内テキストの行数が異なっていても、横並びの要素同士ならぴったり高さを一緒にしてくれます。

【使い方】

jquery.matchHeight.jsのGithubページからダウンロードしたプラグインファイルを読み込んでjQueryを一行記載します。
※jQuery本体は、上位に読み込んでいる前提です。

<script type="text/javascript" src="js/jquery.matchHeight.js"></script>
<script>
$(function(){
　　$('.matchHeight').matchHeight();
});
</script>

<ul>
  <li class="matchHeight">テキスト。テキスト。</li>
  <li class="matchHeight">テキスト。テキスト。</li>
  <li class="matchHeight">テキスト。</li>
</ul>

これで指定したクラスが付与された横並び要素の高さが均一になります。
※.matchHeightというクラスは任意で大丈夫です。

便利で簡単、とっても重宝しているプラグです。