みなさんこんにちは、mayukouです。
今回はwebデザインするときの便利なjQueryをご紹介します。
divを横並びにしたときに、高さが揃わないことってありますよね。
ボックス要素の中身によっては、文字数が違ったりして高さが揃わず、カラム落ちしてしまうことも・・・
そんなときに便利な方法をお伝えします。レスポンシブにも対応です。
カード型レイアウトにも使えそうですよ。
スポンサードリンク
その前に：Table-cellでできる？横並びの高さ揃え。
高さを揃えたい場合、CSS3のdisplay:tableを使う方法もあります。
横並びにしたい親要素にdisplay:table;を設定し、
その中の要素にdisplay:table-cellを設定したら横並びが実現できるというやり方です。
CSS3なのでIE対応などブラウザ対応の方が面倒（不勉強なもので）という点からjQueryを選びました。
今回の方法は、jQueryでサクッとクロスブラウザで対応できてしまうので、
こちらを選びました。
jQuery.matchheight.jsの特徴
floatとの併用
ボックス要素（div,liなど）にまずfloat=“left”をかけて要素を横並びにしておきましょう。
jQuery.matchheight.jsのメリット
レスポンシブ対応
設置が簡単。面倒なCSSはなし
jqueryなのでクロスブラウザ対応
ではやり方を行ってみましょう。
デモ＆ダウンロード
公式サイトからjQueryをダウンロードできます。
デモ＆ダウンロードはここから
使い方
公式サイトからjQueryをダウンロードしたら、
＜head＞内に
jqueryと一緒に読み込みます。Scriptも書きましょう。
|
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-match-height').matchHeight(); }); </script> |
＜body＞内に
高さを揃えたい要素（divやliなどのブロック要素）にscriptに記述したものと同じクラス名をつけます。ここでは、
class=“js-match-height”になります。
|
1 2 3 4 |
<div class="js-match-height">box1</div> <div class="js-match-height">box2</div> …（中略） <div class="js-match-height">box3</div> |
クラス名の.js-match-heightは任意で設定OKです。
必ずスクリプトと揃えましょう。
設定は以上です。
最後に
いかがでしたか？仕事で使用して便利だったのでご紹介しました。
気になるな方はぜひ使ってみてください。
投稿者プロフィール
-
Webデザイナー修行中のmayukouです。webデザインのお仕事を始めてなんとか約６年が経ちました。とにかく技術を高めようと思っています。仕事で得た知識やお役立ち情報をご紹介いたします。宜しくお願いします。水彩画を勉強中です。趣味は音楽鑑賞（洋楽）、料理、読書、ブログです。
詳しくはこちら
この記事へのコメントはありません。