郵便受け

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本体 を読み込ませる必要があります。

 

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

 

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

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

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

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

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

 

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

まとめ

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

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

 

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

関連記事

  1. mistake

    WEB

    『FileZilla』で転送に失敗した場合の操作方法について

    FTPソフト『FileZilla』で転送する際に、『失敗した転送』が発…

  2. サーバー

    WEB

    エックスサーバー(XSERVER)でサーバー契約してみよう!!

    ワードプレス(WordPress)でブログを始める際にまず必要となるの…

  3. コントローラー

    WEB

    WordPress でレイアウトが崩れる自動整形を回避する方法

    WordPress で固定ページを作成しようと思い、コードを記述して表…

  4. チェックリスト

    WEB

    『wpX Speed』でDNSレコードから所有権を確認する方法

    WordPress 専用クラウド型レンタルサーバー『wpX Speed…

  5. 404

    WEB

    Broken Link Checker でリンクエラーになってしまう?その対処法について

    Broken Link Checker というプラグインで、リンクエラ…

  6. local by flywheel

    WEB

    Local by Flywheel を使って、ローカル環境を構築してみよう

    『Local by Flywheel』は、簡単に WordPress …



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

wordpress

よく読まれている記事

  1. 3匹のカエル
  2. 郵便受け
  3. ネットショッピング
  4. 空にかざした水晶
  5. mistake
  6. ブランコに乗る女の子
  7. 郵便受け
  8. Google Search Console
  9. チェックリスト
  10. チェーン

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

アフィリエイトサイトにはDiverもお勧め!!

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

パソコンを覗き込む二人の女子
  1. 郵便受け

    WEB

    要素の高さを揃える 『matchHeight.js』の使い方
  2. crayon,クレヨン

    WEB

    記事内にソースコードを表示する『Crayon Syntax Highlighte…
  3. ネットショッピング

    WEB

    エックスサーバーで常時SSL化する方法について
  4. ガッツポーズする男性

    WEB

    アドセンスのサイト追加審査に一発合格したブログの詳細を公開!!
  5. シャットダウン

    WEB

    XSERVER(エックスサーバー)で設定したドメインを削除する方法
PAGE TOP