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

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

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

  2. jQuery

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

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

  3. jQuery

    ホームページに必須!?jQueryでトップへ戻るボタンの作り方

    みなさんこんにちは、mayukouです。だいぶ春らしくなってきました…

  4. jQuery

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

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

  5. jQuery

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

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

  6. jQuery

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

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

コメント

  • コメント (0)

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

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

CAPTCHA


メルマガを購読する

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

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


最近の記事

instagramもやっています

facebook更新中!

スポンサー

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

  1. moleskine

    グッズ

    モレスキン買いました。そして、周辺のステーショナリーを集めてみた。
  2. デザイン

    【随時更新】クリスマス&年賀状に使えるイラスト素材を無料配布します♩
  3. Photoshop

    ちょっと洒落てる!Photoshopで作る、白いシャドーが入った押したくなるボタ…
  4. jQuery

    ボックス要素を横並びにしたときに高さが揃えられるJQuery、jquery.ma…
  5. CSS

    レスポンシブ対応!CSSで二重線のボーダーボックスを作る方法
PAGE TOP