郵便受け

WEB

要素の高さを揃える 『matchHeight.js』の使い方

float させた横並びのカラムの高さをそろえたい!! だけど、ボックス内の内容量に差がある為、レイアウトが崩れてしまって困っている…

今回は、そんなあなたに便利な jQuery のプラグイン『matchHeight.js』の使い方を紹介します。

JavaScript がまだよく分からないあなたも、大丈夫です!!

matchHeight.jsの使い方

matchHeight.js

① まずは、GitHub の『 liabru / jquery-match-height  』にアクセスし、下の画像の赤枠内『Clone or download』をクリック。

matchHeight.js

さらに表示される『Download ZIP』をクリックします。

 

② ダウンロードされたフォルダ『jquery-match-height-master』を開き、『jquery.matchHeight.js』をコピーします。

 

③ 使用したい Webサイトのフォルダ内に『js』というフォルダを作り、その中に ② でコピーした『jquery.matchHeight.js』をペーストします。

次に、HTML 側で読み込む為の作業をしていきます。

ちなみに、script 要素は特に問題がない限り、</body> の手前に記述するのが一般的です。しかし、head 内で読み込まないと動かない jQuery、逆に body の終了タグの直前でないと動かない jQuery もあります。

一度、body の終了タグの直前で読み込んでみて、うまく動かなければ head 内で読み込んでみる方法をお勧めします。

 

④ では、早速 body の終了タグの直前に、コードを記述していきましょう。

jQuery のプラグインを動かす基本として、最初にベースとなる jQuery本体 を読み込ませる必要があります。

<!-- jquery本体 読み込み -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

 

⑤ 次に『matchHeight.js』を読み込ませる為のコードを記述しましょう。

<!-- matchHeight.js 読み込み -->
<script type="text/javascript" src="js/jquery.matchHeight.js"></script>

 

⑥ 次に、GitHub の『 liabru / jquery-match-height 』のページに戻り、下にスクロールして使用法『Usageをコピーしましょう。

これは『matchHeight.js』を動かす為のコードです。

<script>
  $(function() {
  $('.item').matchHeight(options);
  });
</script>

これを、⑤ の下にペーストします。この時、script タグで囲むことを忘れないようにしましょう。(上記はすでに囲んであります。)

上記コード内の options は、高さ関連の指定をここに記述することができるのですが、今回は使わないので options という文字を削除します。

上記コード内の .item は、class名になります。任意の名前に変更することができます。ここでは、このまま item という class名 を使用することにします。

 

⑦ 最後に、高さを揃えたい div にこの item というclass名を追加するだけで、横一列に高さがそろった状態になります。

まとめ

今回は、float させた横並びのカラムの高さを揃えたい時に手軽に使える『matchHeight.js』をご紹介しました。

JSライブラリーの中でも、レスポンシブにも対応していて使いやすいのでお勧めです。

 

 
スポンサードリンク
 
スポンサードリンク

海に浮かぶ男性float 解除と clearfix前のページ

横並びさせた要素の端のマージンを調整する方法次のページ洗濯物

関連記事

  1. タイプライター

    WEB

    font-weight プロパティについて

    font-weight とは、フォントの太さを指定する際に使用するプロ…

  2. ドメイン

    WEB

    エックスサーバー(エックスドメイン)でドメインを取得しよう

    エックスサーバー(XSERVER)でサーバー契約を済ませたら、次はドメ…

  3. 3匹のカエル

    WEB

    アメブロの見出しをカスタマイズする方法

    今更ながらアメブロデビューしました。そこで気づいたのですが、ア…

  4. pencils

    WEB

    さあ、WordPress(ワードプレス)でブログを始めよう!!

    全くの初心者さんでも分かるように、WordPress でブログを始める…

  5. 黄色い壁を背に喜ぶ女性

    WEB

    画像圧縮なら『TinyPNG』、使い方とその実力を検証します

    画像を圧縮するならパンダでおなじみの『TinyPNG』、画質を落とさず…

  6. ケーブル

    WEB

    『お名前.com』で取得したドメインを『エックスサーバー』に紐付けする方法

    ここでは お名前.com で取得したドメインを、エックスサーバー(XS…

== WORDPRESS 完全マニュアル ==

wordpress

よく読まれている記事

  1. ガネーシャ
  2. fontAwesome
  3. ケーブル
  4. wordpress,ワードプレス
  5. タイプライター
  6. ドメイン
  7. ドメイン
  8. Google Search Console
  9. パソコンを前に困っている女性
  10. 郵便受け

当サイトで使用しているテーマはこちら!!

Gutenberg 完全対応のテーマならコレ!!

Adobeを買うのならどこよりも安い?!

WordPressでブログ始めてみませんか?

パソコンを覗き込む二人の女子
  1. 黄色い壁を背に喜ぶ女性

    WEB

    画像圧縮なら『TinyPNG』、使い方とその実力を検証します
  2. 緑のドア

    WEB

    ドメインって何? どうやって決めるの?
  3. Google Search Console

    WEB

    【2019年】『Google Search Console』でプロパティの追加と…
  4. ドメイン

    WEB

    エックスサーバー(エックスドメイン)でドメインを取得しよう
  5. pencils

    WEB

    さあ、WordPress(ワードプレス)でブログを始めよう!!
PAGE TOP