レスポンシブでも横並びの段組の高さを揃えられるjQuery「matchHeight」の使い方
web関連
前回、紹介したレスポンシブwebデザイン講座 で、レスポンシブサイトを作ったのですが、幅を変更すると横並びの要素の高さがそれぞれ異なるので、段組が崩れることがありました。そこで、高さを揃える方法がないかなって探していたところ、便利に設定できるjQueryがありましたので、その導入方法と使い方について紹介したいと思います。
※実際に私が設定した段組の高さを揃えたサイトは
高さが崩れた段組と揃った段組
高さが崩れた段組
揃った段組
jQuery「matchHeight」の使い方
高さを調整するために、さまざまなやり方があるかと思いますが、もっとも簡単な方法だと思います。
liabru/jquery-match-heightからコードをダウンロードします。
ダウンロードしたら、フォルダの中からjquery-match-Height.jsを選び、htmlと同じ階層にFTPソフトでアップロードします。
↓のコードをhtmlのhead中にコピペします。
|
1 2 3 4 5 6 7 |
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script type="text/javascript" src="jquery.matchHeight.js"></script> <script> $(function(){ $('.js-matchHeight').matchHeight(); }); </script> |
その後、高さを合わせたい要素にclass属性でjs-matchHeightと指定します。
編集後にhtmlとcssをアップロードすると横並びにした要素の高さが揃います。
まとめ
いかがでしたか？簡単に段組の高さを揃えることができたかと思います。CSSのみで調整する方法もあるかと思いますが、簡単に調整したいと考えている方には、使える方法かなと思います。jQueryを使いますが、一つの方法として頭に入れて置きたい方法ですね。
本気でプログラミングを学んで、HPを作りたいとか、スマホアプリを作りたいとか、転職して別の道に進みたいと考えている人へ、最短で習得する為にはスクールを利用することをおすすめしたいと思います。
なぜなら、私はwebと関係ない世界から今はこうやってブログを書いていますが、初めは独学で勉強して...
この記事が気に入ったら
いいね！しよう
最新情報をお届けします
Twitterでshare lifeをフォローしよう！
Follow share life