• HOME
  • ブログ
  • web関連
  • レスポンシブでも横並びの段組の高さを揃えられるjQuery「matchHeight」の使い方

レスポンシブでも横並びの段組の高さを揃えられるjQuery「matchHeight」の使い方

web関連

前回、紹介したレスポンシブwebデザイン講座 で、レスポンシブサイトを作ったのですが、幅を変更すると横並びの要素の高さがそれぞれ異なるので、段組が崩れることがありました。そこで、高さを揃える方法がないかなって探していたところ、便利に設定できるjQueryがありましたので、その導入方法と使い方について紹介したいと思います。

※実際に私が設定した段組の高さを揃えたサイトはこちら

高さが崩れた段組と揃った段組

高さが崩れた段組
高さが異なる段組1

揃った段組
揃えた段組

jQuery「matchHeight」の使い方

高さを調整するために、さまざまなやり方があるかと思いますが、もっとも簡単な方法だと思います。
liabru/jquery-match-heightからコードをダウンロードします。

javascriptダウンロードする
ダウンロードしたら、フォルダの中からjquery-match-Height.jsを選び、htmlと同じ階層にFTPソフトでアップロードします。
↓のコードをhtmlのhead中にコピペします。

その後、高さを合わせたい要素にclass属性でjs-matchHeightと指定します。
編集後にhtmlとcssをアップロードすると横並びにした要素の高さが揃います。

まとめ

いかがでしたか?簡単に段組の高さを揃えることができたかと思います。CSSのみで調整する方法もあるかと思いますが、簡単に調整したいと考えている方には、使える方法かなと思います。jQueryを使いますが、一つの方法として頭に入れて置きたい方法ですね。

この記事が気に入ったら
いいね!しよう

最新情報をお届けします

Twitterでshare lifeをフォローしよう!

中川 憲治

455,173 views

動画編集やWEB関連などを当ブログに書き出して2年後、12年間働いていた消防士を辞め、自分のやりたいことを仕事にしたいと考えてWEB業界に転職する。 自身の...

プロフィール