JavaScript

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

Web開発におけるUI/UXの改善は、ユーザー体験に大きな影響を与えます。特に、横並びの要素の高さが揃っていないと、サイトの見た目が乱れてしまうことがあります。そこで、今回は「jquery.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>

jquery.matchHeight.jsを使って横並びの不揃いな要素の高さを揃えるデモページ

実際にこの方法で高さを揃えた例を見たい場合は、以下のデモページを参照してください。リアルタイムでの高さの揃え方を確認できます。

jquery.matchHeight.jsを使って横並びの不揃いな要素の高さを揃えるデモページ

ソース元:matchHeight.js

jquery.matchHeight.jsの詳細については、以下の公式サイトを参照してください。

matchHeight

まとめ

この方法を使えば、横並びの要素の高さを簡単に揃えることができます。特にレスポンシブデザインを考慮したウェブサイト制作において、このテクニックは非常に有効です。初心者の方でも挑戦しやすい内容なので、ぜひ試してみてください。

 

※流用される場合は自己責任でお願いします。
 デモページタグ内のGoogleアナリティクスタグは流用しないで下さい。