Blog

高さを揃えるjQueryプラグイン「jQuery-fixHeightSimple」をレスポンシブ対応しました

以前、公開させていただいた、高さを揃えるjQueryプラグインの「jQuery-fixHeightSimple」を、

レスポンシブに対応させました。

 

How to use (使い方) Options (オプション)

 

↓DEMOはこちら

DEMO

 

↓新しい「jQuery-fixHeightSimple」はこちらからダウンロードしてください

Download

min版 Download

2017.03.01追記: いくつかのバグを修正いたしました

使い方

1. HTML内でjQueryと共にダウンロード後サーバーに配置したプラグインのJSファイルを読み込んでください

 

2. 以下のコードを入力しプラグインを実行してください

高さをそろえる要素を、すべて同じ高さにする場合はこれでOKです。

 

行ごとに高さを変えたい場合は、以下の2つの方法で指定することができます。

i. カラム数を指定する

固定でカラムの数を指定したい場合は、上記のようにカラムの数をオプションで指定してください。

 

ii. レスポンシブを有効にする

今回新たに追加したオプションのresponsiveをtrueに設定することで、

現在のカラム数を自動で計算し、そのときの行ごとに高さを揃えます。

responsiveParentで指定した要素が、そのカラム数の基準になります。

 

また、レスポンシブサイトでは、

CSSでbox-sizing: border-boxを指定している場合もよくあると思いますが、

その場合は、以下のようにオプションでboxSizingBorderBox: trueを指定してください。

 

オプション

Options Default Description
column 0 高さをそろえる行のカラム数を固定で指定
responsive false trueを指定で、そのときの行ごとに高さを自動で揃える
responsiveParent “body” レスポンシブ時に高さを揃える要素群を囲っている要素を指定
boxSizingBorderBox false 高さを揃える要素にCSSでbox-sizing:border-boxが指定されている場合は、tureを指定

Author Profile

ninomiya
ninomiya

Webデザイナー兼コーダーです。
イラストを描くのも好きです。
SVGとCanvasを使ったWEBアプリにも興味があります。
よろしくお願いいたします。

» 投稿一覧
  • Launch Cart次世代ECサイト構築システム 初期月額無料
  • LaunchMovie ECに特化した動画制作サービス

Archive

ページTOPへ