SHU BLOG

BLOG NEWS ブログ

  • ARTICLE
    2020.02.16
  • CATEGORY
TITLE

【jQuery】を使い要素の高さを揃えましょう

SHU[シュウ]

1991年生まれ九州の宮崎県育ち
高校卒業後、愛知県で自動車関係の
お仕事に5年間勤め、WEB業界に
転職致しました。
趣味:サッカー観戦、ゲーム、映画、漫画
基本インドアです!笑

シュウ
シュウ
今回は【jQuery】を使い要素の高さを揃えましょう!をテーマに解説していきます

jQueryを使い要素の高さを揃える

jQueryを使い要素の高さを揃える

よく、文字数や画像サイズでレイアウトが崩れる事があるんだよね。
あと、2段目のレイアウトも崩れる事があるんだよね。

その問題は、ブロック毎の高さが違うから崩れるんだよ!
今回は1番高いブロックに合わせるようにするよ!

HTMLを書いてみましょう

<div id="wrapper">
  <ul>
    <li>
		<div>
		  <img src="img/img1.jpg" alt="Photo">
		  <p>【ブログ運営報告】初心者がブログを初めて1ヶ月!変わった生活週間</p>
		</div>
	</li>
	<li>  
		<div>
		  <img src="img/img2.jpg" alt="Photo">
		  <p>【HTML table】表を作成からレイアウトの変更までを解説</p>
		</div>
	</li>
	<li>
		<div>
		  <img src="img/img3.jpg" alt="Photo">
		  <p>キャンプ見学に必要な持ち物リスト6選! 服装やあると便利なグッズ</p>
		</div>
	</li>
	<li>
		<div>
		  <img src="img/img4.jpg" alt="Photo">
		  <p>【WordPress】プラグインを使わずに管理画面をカスタマイズする方法</p>
		</div>
	</li>
	<li>
		<div>
		  <img src="img/img5.jpg" alt="Photo">
		  <p>アナザーエデンの魅力 2019年を振り返っての感想をまとめてみた</p>
		</div>
	</li>
  </ul>
</div>

CSSを書いてみましょう

body{
	background:#efb90c;
}

#wrapper{
	width:1000px;
	margin:100px auto;
}

ul{
	overflow:hidden;
	margin-bottom:50px;
	display:block;
}

ul li{
	width:240px;
	background:#ffffff;
	color:#333333;
	float:left;
	margin-right:1px;
}

p{
	padding:14px;
	line-height:2em;
}

jQueryを書いてみましょう

$(function(){
  // 高さの最大値を代入するための変数h
  var h = 0;

  // それぞれの要素の高さを調べる
  $("ul li").each(function(){
    // 要素の高さと変数hの値を比較し、大きい方を変数hに代入
    if($(this).height() > h){
      h = $(this).height();
    }
  });

  // 要素の高さを変数hの値に統一します
  $("ul li").css("height", h + "px");
});

See the Pen
rNVLmoR
by shu (@shu0325)
on CodePen.

※少し見やすくするためにCSSのみ少し変更しております。
今から解説の方をおこなっていきます。

各要素の高さを比較して最大の高さ(サイズ)を取得する

1全ての要素のうちに1番大きい要素に全ての高さを合わせます。
初期値は0に設定しておきます。高さを代入するために変数hを用意しておきます。

$(function(){
   //高さの最大値を代入するための変数h
   var h = 0;
});

2次に要素の高さを順に調べます。
今回はul要素内のliタグに設定をおこないます。対象となるul、liタグを(“ul li”)このように記述します。
複数ある要素について調べるためeach()メソッドを使用し、
その中でheight()メソッドを使用して高さを取得します。

$(function(){ 
   //高さの最大値を代入するための変数h
   var h = 0; 

   //それぞれの要素の高さを調べる
  $("ul li").each(function(){
      // 要素の高さを取得する
     $(this).height();
   });
});

3次にif文を使用します。
height()メソッドで取得した高さの値を変数hの値と比較します。
if文はeach()メソッドの中にもあるので、それぞれの要素について順番に比較が行われます。
これによって、最終的に高さの最大値が変数hの値として残るのです。

$(function(){ 
   //高さの最大値を代入するための変数h
   var h = 0; 

   //それぞれの要素の高さを調べる
  $("ul li").each(function(){
      // 要素の高さをと変数hの値を比較し、大きい方を変数hに代入します
     if($(this).height() > h) {
	 	h = $(this).height();
	 }
   });
});

取得した最大の高さ(サイズ)を全ての要素の高さに適用する

4全ての要素の高さを、変数hの値(1番大きい高さ)に変更いたします。
css()メソッドを使用し、”ul li”のheightプロパティの値を指定することによって高さを揃えることができます。

$(function(){ 
   //高さの最大値を代入するための変数h
   var h = 0; 

   //それぞれの要素の高さを調べる
  $("ul li").each(function(){
      // 要素の高さをと変数hの値を比較し、大きい方を変数hに代入します
     if($(this).height() > h) {
	 	h = $(this).height();
	 }
   });
   
   // 要素の高さを変数hの値に統一します
   $("ul li").css("height", h + "px");
});

次にjQueryのプラグイン『matchHeight.js』の使い方も紹介しています。

要素の高さを揃える 『matchHeight.js』の使い方

matchHeight.js

Githubページ

「Clone or download」をクリックし、「Download ZIP」をクリックしダウンロードをおこなってください。

jQueryを読み込みましょう

<!-- jquery本体 読み込み -->
<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
<!-- matchHeight.js 読み込み -->
<script type="text/javascript" src="js/jquery.matchHeight.js"></script>
<script>
$(function(){
  $('ul li').matchHeight();
});
</script>

<ul>
  <li>テキストが入ります。テキストが入ります。</li>
	<li>テキストが入ります。テキストが入ります。</li>
	<li>テキストが入ります。テキストが入ります。</li>
</ul>

シンプルですが完成です。クラス名などは変更してください。

確かな力が身につくJavaScript「超」入門 第2版
created by Rinker

まとめ

今回はこれで以上です。

floatさせた際に、横並びの高さがバラバラでレイアウトが崩れたことはないでしょうか?
cssで高さを揃える方法もありますが、今回はjQueryを使い要素の高さを揃えました。

私もjQueryはまだまだ勉強中ですが現場で役立つ情報を発信していきます。

スポンサーリンク

SHU

1991年生まれ九州の宮崎県育ち高校卒業後、愛知県で自動車関係のお仕事に5年間勤め、WEB業界に転職致しました。
趣味:サッカー観戦、ゲーム、映画、漫画基本インドアです!笑
つくる、しあわせをテーマとして主にWEBに関する様々な情報を発信しています。

関連記事

オススメ記事

月別アーカイブ

Portfolio

page_top