jQuery

ボックス要素を横並びにしたときに高さが揃えられるJQuery、jquery.matchheight.jsが便利!レスポンシブ対応!


みなさんこんにちは、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も書きましょう。

<body>内に
高さを揃えたい要素(divやliなどのブロック要素)にscriptに記述したものと同じクラス名をつけます。ここでは、
class=“js-match-height”になります。

クラス名の.js-match-heightは任意で設定OKです。
必ずスクリプトと揃えましょう。

設定は以上です。

最後に

いかがでしたか?仕事で使用して便利だったのでご紹介しました。
気になるな方はぜひ使ってみてください。

投稿者プロフィール

mayukou
mayukou
Webデザイナー修行中のmayukouです。webデザインのお仕事を始めてなんとか約6年が経ちました。とにかく技術を高めようと思っています。仕事で得た知識やお役立ち情報をご紹介いたします。宜しくお願いします。水彩画を勉強中です。趣味は音楽鑑賞(洋楽)、料理、読書、ブログです。
詳しくはこちら

Twitterをフォローしていただくと、最新情報を見逃しません♫

関連記事

  1. jQuery

    簡単設置で見やすい!レスポンシブ対応メニューslicknavの使用方法

    みなさんこんにちは、mayukouです。さて、4月21日から、goo…

  2. jQuery

    スマホに使える!3階層のアコーディオンメニューを作りました!

    仕事でスマホサイトを作っているのですが、その際にモックアップとして作…

  3. jQuery

    軽量のスクリプトで簡単に!レスポンシブメニューを実装できるResponsive Nav

    みなさんこんにちは、mayukouです!今回は、うちのブログで結構…

  4. jQuery

    カードレイアウトにもオススメ!Masonryプラグインの使い方

    みなさんこんにちは、mayukouです。今回は、今流行りのカードレイ…

  5. jQuery

    横幅いっぱいに表示可能なスライダーのjQueryプラグイン 「Skippr」が便利!

    みなさんこんにちは。11月に入り寒くなりましたね。今年もあと2ヶ月と…

  6. jQuery

    JQueryで要素を消すスクリプト!ECサイトの注意書きにもオススメ!

    みなさんこんにちは、mayukouです。ECサイトには、配送に関す…

コメント

  • コメント (0)

  • トラックバックは利用できません。

  1. この記事へのコメントはありません。

CAPTCHA


メルマガを購読する

Web Design Cafeの メルマガを購読する

更新情報や、お知らせ、お得情報をゆる〜く配信(月1程度)。


最近の記事

instagramもやっています

facebook更新中!

スポンサー

こんなサイトも作ってます。

  1. Mac

    イラストレーターにオススメ!iPad Pro 9.7 wifiレビュー
  2. illustration

    簡単!Illustratorでキラキラ星を作る方法
  3. Tutorial

    ワイヤーフレームがプロ仕様に!素敵なグラフィックスタイル「WireMagic」
  4. Sass

    使わない方が良い?WordPress 案件をsassでカスタマイズして思う3つの…
  5. jQuery

    軽量のスクリプトで簡単に!レスポンシブメニューを実装できるResponsive …
PAGE TOP