こんにちは、Ryohei(@ityryohei)です!

横並びにした要素の高さを揃えるスクリプトのご紹介です。

jQueryであれば、matchHeightというプラグインを使えば簡単に実装できる内容ですが、jQueryに頼らず、プラグインなしで要素の高さを揃えたかったため、今回スクリプトを作成しました。ロード、リサイズにも対応していますので、同様の処理を探している方の参考になれば幸いです。

本記事の内容

  • 親要素を指定して、横並びにした子の中で一番高い要素の高さに揃える

では解説していきます。

横並びの要素の高さを揃える

HTML

本記事では、下記のHTMLを使用します。idがelemとなっている要素の子の高さを揃えます。

<ul id="elem">
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

上記のHTMLに横並びになるスタイルを適用させると下記のようになります。下記ではfloatを使用して子要素を横並びにしています。高さを固定していないため、コンテンツに合わせた高さとなっています。

See the Pen JavaScript | autoHeight1 by ryoy (@intotheprogram) on CodePen.

JS

コンテンツの高さを揃えるためのスクリプトを記述します。idがelemとなっている要素の子を取得し、子の中でheightが一番高い要素に高さを揃えています。処理内容については、コメントをご参照ください。

const autoHeight = () => {

  //idがelemの要素を取得
  let elem = document.getElementById('elem');
  //elemの子要素をすべて取得
  let elemChildren = elem.children;
  //高さの最大値を代入する変数を初期化
  let elemMaxHeight = 0;
  //elemの子要素の高さを格納する配列を初期化
  let elemArray = new Array;

  //elemの子要素をループ
  Array.prototype.forEach.call(elemChildren, function(elemChild) {
    
    //子要素の高さのスタイルを初期化(リサイズ対応用)
    elemChild.style.height = '';
    //elemの各子要素の高さを取得
    elemArray.push(elemChild.clientHeight);

  });

  //配列に格納した高さの最大値を取得
  elemMaxHeight = Math.max.apply(null, elemArray);

  //elemの子要素をループ
  Array.prototype.forEach.call(elemChildren, function(elemChild) {
    //elemの子要素のheightにelemMaxHeightを設定
    elemChild.style.height = elemMaxHeight + 'px';

  });
}

//ロードとリサイズ時に関数autoHeightを実行
window.addEventListener('load', autoHeight);
window.addEventListener('resize', autoHeight);

下記はスクリプトを実行した結果です。横並びになった子要素の中で一番高い要素に高さを揃えています。リサイズにも対応していますので、「EDIT ON CODEPEN」をクリックしてウィンドウサイズを変更して試していただければと思います。

See the Pen JavaScript | autoHeight2 by ryoy (@intotheprogram) on CodePen.

上記でご紹介したスクリプトでは、idを指定して親要素を取得していますが、他の方法で親要素を取得したい場合は下記のページで各要素の取得方法を解説していますので、参考にしていただければと思います。

【JavaScript】要素にclassを追加・削除する【classList】

最後に

本記事ではスクリプトで横並びの要素の高さを揃えましたが、CSSのflexを使うことでもっと簡単に高さを揃えることが可能です。flexが使える案件であればflexを使用し、使用できない案件では本記事でご紹介したスクリプトや、matchHeight等のプラグインを使用していただければと思います。

もし、JavaScriptをしっかりと勉強したい方は下記の参考書がおすすめです。基礎から応用まで多くのサンプルを用いて解説されています。ページ数は多いですが、その分内容も濃いです。腰を据えて学びたい方に最良の一冊です。

以上、JavaScriptで横並びの要素の高さを揃える方法のご紹介でした!

この記事を書いた人

Ryohei

Webエンジニア / ブロガー

福岡のWeb制作会社に務めるWebエンジニアです。エンジニア歴は10年程で、好きな言語はPHPとJavaScriptです。本サイトは私がインプットしたWebに関する知識を整理し、共有することを目的に2015年から運営しています。Webに関するご相談があれば気軽にお問い合わせください。

JavaScriptを基礎からしっかりと学びたい方へ

下記の参考書がおすすめです。私がJavaScript入門時に購入した書籍で、基礎から応用まで多様なサンプルを用いて解説されています。ページ数は多いですが、内容が伴っているのですらすら読めます。腰を据えて学びたい方に最良の一冊となっています。