初心者向け！jquery.matchHeight.jsで横並び要素の高さを簡単に揃える完全ガイド｜DAD UNION

Web開発におけるUI/UXの改善は、ユーザー体験に大きな影響を与えます。特に、横並びの要素の高さが揃っていないと、サイトの見た目が乱れてしまうことがあります。そこで、今回は「jquery.matchHeight.js」を使って、横並びの要素の高さを簡単に揃える方法をご紹介します。このテクニックは、エンジニア初心者でも手軽に実装でき、見た目の整ったページを作ることができます。

Contents

CSSの基本設定
jQueryとjquery.matchHeight.jsの導入
HTMLの記述
jquery.matchHeight.jsを使って横並びの不揃いな要素の高さを揃えるデモページ
ソース元：matchHeight.js
まとめ

CSSの基本設定

まずは、横並びの要素を作るためのCSSを設定します。以下の例では、liタグを使用して横並びに表示します。背景色やフォントサイズなどはお好みで調整してください。

<style type="text/css">
<!--
h1{
  text-align: center;
  padding: 10px 0;
  font-size: 18px;
}
ul{
  width: 1000px;
  margin: 0 auto;
  padding: 0;
  overflow: hidden;
}
ul li{
  width: 160px;
  padding: 10px;
  margin: 10px;
  float: left;
  background: #333;
  list-style: none;
  color: #fff;
  font-size: 14px;
  line-height: 1.6em;
}
-->
</style>

jQueryとjquery.matchHeight.jsの導入

次に、jQueryとjquery.matchHeight.jsのスクリプトをページに追加します。これにより、指定した要素の高さをJavaScriptで揃えることができます。
jquery-1.11.0.min.jsとjquery.matchHeight.jsファイルを読み込みます。不揃いな高さを揃えるliタグ要素（.list）を指定します。

<script src="./jquery-1.11.0.min.js"></script>
<script src="./jquery.matchHeight.js"></script>
<script>
$(function() {
  $('.list').matchHeight();
});
</script>

HTMLの記述

横並びの要素をHTMLで記述します。ここでは、liタグに異なる量のテキストを入れ、高さが不揃いになるようにしています。
jquery.matchHeight.jsを使うことでテキスト量が違うliタグ要素の高さを揃えます。

<h1>jquery.matchHeight.jsを使って横並びの不揃いな要素の高さを揃える</h1>
    <ul>
      <li class="list">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</li>
      <li class="list">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</li>
      <li class="list">テキストテキストテキストテキスト</li>
      <li class="list">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</li>
      <li class="list">テキスト</li>
      <li class="list">テキストテキストテキストテキスト</li>
    </ul>