Ownedmedia ウェブ制作に役立つコンテンツを発信中!

JavaScript 2019.07.08

JavaScriptで複数ある特定の要素の高さを揃える

Tags: ,,
最終更新日:Update

Flexboxやgridを使ったレイアウトが増えてきているので、必要となる場面は減ってきているのですが、floatで横並びにした時や、position: absolite;などの絶対配置を使った時に、要素の高さを揃えたい場合があるかと思います。そんな時にjavascriptを使って動的に要素の高さを揃える方法になります。

 

今回はサンプルに下記のようなHTMLを用意しました。複数の要素が横並びになるようなケースであれば大抵使えるのではないでしょうか。

【HTML / CSS】※一部抜粋

// HTML

<div>
 <p class="equal-height">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
 </p>
 <p class="equal-height">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
 </p>
 <p class="equal-height">テキストテキストテキストテキストテキストテキスト
 </p>
 <p class="equal-height">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
 </p>
</div>

// CSS

<style>
 div {
  overflow: hidden;
 }
 div > p {
  float: left;
 }
</style>

 

高さを揃えたい要素にはclassをあてています。これでjavascriptを使ってclassを割り振った要素の高さを揃えていきます。コードは次のようになります。

【javascript(ES6)】

function equalHeight(elements) {
 const target = Array.from(document.querySelectorAll(elements));
 const heightList = [];
 target.forEach(element => {
  const height = element.clientHeight;
  heightList.push(height);
 });
 const maxHeight = Math.max.apply(null,heightList);
 target.forEach(element => {
  element.style.height = maxHeight + 'px';
 });
}

equalHeight('.equal-height');

 

まず指定要素をquerySelectorAllで全て取得し、NodeListから配列に変換しておきます。あわせて各要素の初期値の高さを保持するための空の配列を用意しておきます。先ほど取得したそれぞれの要素から高さを取得します。取得した高さの値は、用意していた空の配列に入れていきます。

 

そして、全ての高さの値から最大の値を取得し、再びそれぞれの要素に対して最大値の値を高さに設定するという仕組みになります。ちなみに上記のArray.from()のメソッドはIE11に対応していないので注意が必要です。IE11への対応を考慮する場合には代わりに、Array.slice.call()を使うようにします。そして、最後に定義した関数を実行する際に、引数として対象の要素のclassを与えてあげます。

 

今回のサンプルはこちらに用意しています。関数として定義しているので、引数を取っておくと、要素が変わった時に使いまわせるので便利ですね。もちろん複数箇所で適用させることも可能です。

See the Pen
equal height
by designsupply (@designsupply)
on CodePen.

要素を揃える場合にはjQueryなどでもいろんなプラグインが用意されていますが、限定的である場合などプラグインを使うまでもない場合にはこのような形で調整するのもいいのではないでしょうか。

この記事を書いた人

オガワ シンヤ

DesignSupply.代表 / ディレクター・ウェブデザイナー・フロントエンドエンジニアをやっています。「ウェブとデザインでヒト・モノ・サービスを繋げ新しい価値を生み出す」をコンセプトに日々奮闘中!制作中はチョコレートが欠かせない三十路Webクリエイター。

  • Twitter

コメントフォーム

記事に関するご質問やご意見などありましたら下記のコメントフォームよりお気軽に投稿ください。なおメールアドレスは公開されませんのでご安心ください。

内容に問題なければ、お名前・ハンドルネームとメールアドレスを入力いただき、下記の「コメントを送信」ボタンを押してください。

CAPTCHA


この記事もよく読まれています

Scroll to Top
ご質問・ご相談はありませんか ?