1. ホーム
  2. ホームページの作り方
  3. Java Script / jQuery
  4. 横並びの要素の高さを揃えるmatchHeight.jsの導入方法と使い方をご紹介
  • 最終更新日
  • Java Script / jQuery

横並びの要素の高さを揃えるmatchHeight.jsの導入方法と使い方をご紹介

デザインをCSSで整えていく際に要素を横並びにする事があります。

この横並びにした要素にborderプロパティで枠線を付けると中身の情報量によっては高さがチグハグになってしまうんですよねぇ。

特に気にしない方もいますが、僕は気になります。揃ってないとキモチ悪い（笑）、なので中身の情報量が違っても同じ高さに揃える事ができるjQueryをご紹介します。

目次 [閉じる]

matchHeight.jsをダウンロードする

Animate.css

BRM・IO

こちらが「matchHeight.js」を公開しているBRM・IOのサイトです。こちらのサイトではデモページも用意されているのでご確認ください。英語ですが（笑）。

ファイルをダウンロードするにはこちらの「GitHab」のページからおこなえます。

matchHeight.jsのダウンロード

①の「Code」をクリックするとボックスが表示されるので、その中にある②の「Download ZIP」からダウンロードしましょう。

ZIPファイルをダウンロードしますので、解凍してフォルダの中身を確認していきましょう。

matchHeight.jsの導入方法

ダウンロードしたファイルで使うのは「jquery.matchHeight-min.js」だけでOKです。

「jquery.matchHeight-min.js」が置いてあるのは「dist」フォルダの中です。ここには「jquery.matchHeight.js」もあってこちらを使っても同じ効果を得る事はできます。

ただ「jquery.matchHeight-min.js」の方がファイルが軽いんですよね、他のスクリプトのファイルでもそうですが「min」と付いているものがあれば、こっちを使うようにしましょう。

index.html

            
    
                
  1. <!DOCTYPE html>
    2. 
                
  2. <html>
    3. 
                
  3. <head>
    4. 
                
  4. <meta charset="UTF-8">
    5. 
                
  5. <title>matchHeight.jsで高さを揃える</title>
    6. 
                
  6. <style>
    7. 
                
  7. * {
    8. 
                
  8.   margin: 0;
    9. 
                
  9.   padding: 0;
    10. 
                
  10.   box-sizing: border-box
    11. 
                
  11. }
    12. 
                
  12.  
    13. 
                
  13. html {
    14. 
                
  14.   font-family: "Yu Gothic", "YuGothic", "Hiragino Kaku Gothic Pro", "Meiryo UI", "Meiryo", "MS PGothic", sans-serif;
    15. 
                
  15.   font-size: 62.5%;
    16. 
                
  16.   letter-spacing: 0.09em;
    17. 
                
  17.   font-feature-settings: "palt"
    18. 
                
  18. }
    19. 
                
  19.  
    20. 
                
  20. ul {
    21. 
                
  21.   width: 800px;
    22. 
                
  22.   font-size: 0;
    23. 
                
  23.   margin: 100px auto
    24. 
                
  24. }
    25. 
                
  25.  
    26. 
                
  26. li {
    27. 
                
  27.   width: 800px;
    28. 
                
  28.   font-size: 1.7rem;
    29. 
                
  29.   letter-spacing: 0.09em;
    30. 
                
  30.   vertical-align: top;
    31. 
                
  31.   padding: 40px;
    32. 
                
  32.   border: 2px solid #21c69c;
    33. 
                
  33.   display: inline-block;
    34. 
                
  34.   list-style: none
    35. 
                
  35. }
    36. 
                
  36.  
    37. 
                
  37. li + li {
    38. 
                
  38.   margin-left: 4%
    39. 
                
  39. }
    40. 
                
  40. </style>
    41. 
                
  41. </head>
    42. 
                
  42. <body>
    43. 
                
  43.   <ul>
    44. 
                
  44.     <li class="matchHeight">「matchHeight.js」を使って横並びの要素の高さを揃えていきます。ひとつ目のボックスには文章を多めに入れています。</li>
    45. 
                
  45.     <li class="matchHeight">ふたつ目のボックスは文章量を少なくしています。</li>
    46. 
                
  46.   </ul>
    47. 
                
  47. <script type="text/javascript" src="js/jquery.min.js"></script>
    48. 
                
  48. <script type="text/javascript" src="js/jquery.matchHeight-min.js"></script>
    49. 
                
  49. <script>
    50. 
                
  50. $(function() {
    51. 
                
  51.   $('.matchHeight').matchHeight();
    52. 
                
  52. });
    53. 
                
  53. </script>
    54. 
                
  54. </body>
    55. 
                
  55. </html>
    56.

htmlファイルは上記をコピペしてください。大事なのは「jquery.matchHeight-min.js」を使うので「jquery.min.js」も読み込んでおく事。

            
    
                
  1. <ul>
    2. 
                
  2.   <li class="matchHeight">「matchHeight.js」を使って横並びの要素の高さを揃えていきます。ひとつ目のボックスには文章を多めに入れています。</li>
    3. 
                
  3.   <li class="matchHeight">ふたつ目のボックスは文章量を少なくしています。</li>
    4. 
                
  4. </ul>
    5.

そして高さを揃えたい要素にclassを追加。今回は「matchHeight」をクラス名にしています。

            
    
                
  1. $(function() {
    2. 
                
  2.   $('.matchHeight').matchHeight();
    3. 
                
  3. });
    4.

あとはどの要素に対してスクリプトを実行するかの指定を記述します。

「jquery.min.js」がない方は「jQueryを使うために必要な「jquery.min.js」ファイルをダウンロードしよう」のページを参考にしてダウンロードしてください。

こちらも見てください

ファイルが用意できたらそれぞれの階層は下記のようにします。

jquery.matchHeight-min.jsの配置場所

それでは次の項でどのような効果が得られるのかを実際に見ていきましょう。

matchHeight.jsの効果を確認しよう

はい、まずは「matchHeight.js」を使っていない場合どうなるのかを見てもらいましょう。

  • 「matchHeight.js」を使って横並びの要素の高さを揃えていきます。ひとつ目のボックスには文章を多めに入れています。
  • ふたつ目のボックスは文章量を少なくしています。

何も設定していない状態がコレです。ボックスの中身の情報量によってボックスの高さが変わっていますよね？

ボックスに枠線を付けない場合は特に問題ないですが、枠線有りの場合にボックスが3つ4つ並んでそれぞれがバラバラだとかなり気持ち悪いです。なので高さを統一してデザインを整えてやる必要があります。

次に「matchHeight.js」を使った例もみていきましょう。

  • 「matchHeight.js」を使って横並びの要素の高さを揃えていきます。ひとつ目のボックスには文章を多めに入れています。
  • ふたつ目のボックスは文章量を少なくしています。

ちゃんと高さが揃っていますね。一番高さのあるボックスに他のボックスの高さが合わせられる事になります。

これはこれで情報量の少ないボックスにかなり余白が空いてしまうので嫌だという方もおられるかも知れません。まぁ、僕もどちらかというとあんまり余白があるのは好きじゃないです。

なので僕の場合は各ボックスの情報量もできるだけ合わせるようにします。文章の文字数もできるだけ同じくらいに調整して、1行くらいの空白に抑えると余白も気にならなくなります。

この辺は好みの問題でもあるので、あなたが気にならないくらいで調整してみてください。

jQueryを使ってページのトップへ戻るボタンを設置！なめらかな動きを実装しよう wow.jsとanimate.cssを使ってスクロール連動型のアニメーションを実装する！

よく読まれている記事

おすすめの記事

ホームページの簡単な作り方以外にも
お得な情報や日常を紹介するブログも是非どうぞ！Webに関連するレンタルサーバーなどの特徴・料金比較や、
個人的に挑戦している資格取得についての勉強法やグルメなどを紹介しています。

チェピレア日記