0%

Programmingプログラミングナレッジ

Posted:2019.07.08

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

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などでもいろんなプラグインが用意されていますが、限定的である場合などプラグインを使うまでもない場合にはこのような形で調整するのもいいのではないでしょうか。

author
この記事を書いた人オガワ シンヤ
FacebookTwitter

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

制作のご依頼やお問い合わせ・パートナー業務提携のご相談はこちら

デザインやウェブ制作についてのご依頼やご相談、その他お問い合わせなどもお気軽にご連絡ください。フットワークの軽さやレスポンスの早さ、また豊富な経験や知識、技術を活かした対応力といったフリーランスクリエイターの強みでクライアント様、パートナー企業様のお力になります。デザインからコーディングやWordPress実装といったウェブサイト構築はもちろん、写真撮影や動画編集、コンテンツ制作からサイト運用サポートまで一括してお任せください。

ホームページ制作のご検討やウェブ運用でお悩みの経営者様や企業のウェブ担当者様をはじめ、個人で店舗を営んでいらっしゃるオーナー様、フリーで活動されているビジネスオーナー様はもちろんのこと、リソース不足でお困りの制作会社様、またクリエイターをお探しの代理店様も大歓迎です。

コンタクトをご希望の方はお手数ですが、下記よりお問い合わせフォームのページへアクセスしていただき、必要事項を入力の上メッセージを送信してください。確認でき次第すぐに折り返しご連絡致します。

こんな記事も読まれています

コメントもお気軽にどうぞ

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

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。

CAPTCHA


ページトップへ