行数の異なる要素の高さを揃える

2018年5月14日2024年3月6日

皆さんは、こんな経験はありませんか？

行数の違う横並びの要素の高さが揃わない！

特にliなどのList Itemを配置する際に発生しがちですよね。
最初から高さが揃うような文章量にすれば良いのでは？
とは思いますが、そうも言ってはいられません。

そんな時、こんな感じで綺麗に揃える方法をご紹介します！

HTML

  <ul class="list2">
    <li>要素1<br>2行分の高さ</li>
    <li>要素2</li>
  </ul>

jQuery

  
    $(window).on("load resize", function() {
      var w = $(window).outerWidth(),
          x = 600,
          // 要素1の高さを取得
          liHeight = $(".list2 li:first-of-type").height();

      // 要素2のheightにbtnHeightを入れる
      $(".list2 li:last-of-type").css("height", liHeight);

      // 画面サイズによって異なる命令を出したい場合
      if(w > x) {
        $(".list2 li:last-of-type").css("height", liHeight);
      } else {
        $(".list2 li:last-of-type").css("height", "auto");
      }
    });

CSS

  
    body {
      text-align: center;
    }
    h1 {
      margin-top: 100px;
    }
    ul {
      text-align: center;
    }
    ul li {
      padding: 10px;
      background: #444;
      color: #fff;
      display: inline-block;
      vertical-align: top;
    }

とっても簡単ですね。コピペするなどして使ってください。

でもこれだと要素が増えた時何かと大変じゃない？
という声も聞こえてきそうです。

そんな時は「jquery.matchHeight.js」という優秀なプラグインを使用すると確実です。
優秀すぎて上記のコードが落書きに見えてきますが、
過去に書いたコードというのは大抵そんなものです。

以下のサイトに使用方法まで詳しく掲載されているので、
読んでみてください。
要素の高さを揃える「jquery.matchHeight.js」を使ってみた｜プラカンブログ | WEB制作会社プラスデザインカンパニー

優秀なプラグインは確かに便利ですが、
上記のコードを自分で書けるようになっておくと、
ジャングルで遭難した際など、ネットが繋がらない場所でも
自力で要素の高さを揃えることができるので安心ですよ！

是非練習してみてください！