みなさんこんにちは、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デザインのお仕事を始めてなんとか約６年が経ちました。とにかく技術を高めようと思っています。仕事で得た知識やお役立ち情報をご紹介いたします。宜しくお願いします。水彩画を勉強中です。趣味は音楽鑑賞（洋楽）、料理、読書、ブログです。
詳しくはこちら
最新の投稿
- 2019.09.29jQuery画像も文字もスライド可能！Swiper.jsでコンテンツスライダーを簡単に！
- 2019.07.27デザインお店の顔！仕事の幅も広がる私流ロゴデザインマニュアル
- 2018.11.10Photoshop画像からフォントを探してくれる！Photoshopのマッチフォントが素敵。
- 2018.09.02CSSフレームワークサイト制作が早くなる！Bootstrapの特徴
この記事へのコメントはありません。