menu

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

前回、紹介したレスポンシブ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をフォローしよう!

41263347_mレスポンシブWebデザイン講座をレビュー!こんな良い講座はないと思う。

menu2簡単!レスポンシブメニューをjQueryでドロップダウンできるように設定する方法

関連記事

  1. あっという間!写真編集加工に最適なBeFunkyの使い方

    あっという間!写真編集加工に最適なBeFunkyの使い方

    ソーシャルメディアやブログに写真を投稿する際、編集加工したい時ってありますよね。photos…

  2. ブログってそう使うんだ!月間10万PVブロガーとの対談から得たブログ活用法と考え方

    ブログってそう使うんだ!月間10万PVブロガーとの対談から得たブ…

    ブログって何のために使うの?ってふと、思うことありますよね。アドセンスやアフィリエイトに活用…

  3. 28818787 - businessman protect cloud lock symbol with hands

    さくらインターネットでwordpressを完全SSL化する方法

    最近サイトをSSL化にしなければという話を聞き、個人情報やクレジットを取り扱うわけではないですが、今…

  4. こんなに簡単でいいの?パスワード付きホームページの作り方

    こんなに簡単でいいの?パスワード付きホームページの作り方

    自分のサイトをパスワード設定したい時ってありますよね。例えば、あなたのメルマガ会員に…

  5. ど素人が独学でサイトを公開するまでにした失敗と成功

    ど素人が独学でサイトを公開するまでにした失敗と成功

    独学でwebサイトを作成して公開するのって何から手をつけたらいいかわからないですよね。私も全…

  6. HPのワイヤレスプリンターの設定方法(Photosmart Premium C309g)

    HPのワイヤレスプリンターの設定方法(Photosmart Pr…

    年賀状やハガキを印刷する時ぐらいにしかプリンターを使わないので、設定方法を忘れることってあり…

  7. 簡単!photoshopを使ったトイカメラ風写真の作り方

    簡単!photoshopを使ったトイカメラ風写真の作り方

    今や簡単にInstagramで写真を加工できるようになりましたが、自分の好きな色彩で微妙な調…

  8. カフェロゴアイキャッチ

    チョーク風素材の使い方でこんなに印象が変わるの?!(photos…

    チョーク風のデザイン素材を使いたいけど、どのように使えば良いかわからずに悩みますよね。私も…

PAGE TOP