ブロック要素の高さを揃えるJavaScriptはいくつかあります。
その中でも行ごとの高さを変えたい場合に便利な「fixHeight.js」をご紹介します。
目次
「fixHeight.js」の設置方法
まずjQueryを読み込ませます。
そのあとに「fixHeight.js」を読み込みます。
これで設置は完了です。
スタンダードな「fixHeight.js」の使い方
まずはスタンダードにブロック要素の高さを合わせてみます。
長いタイトルや内容などをの高さは無視して行ごとのdlの高さを合わせます。
親要素のクラスに「fixHeight」を付けるだけで揃えてくれます。
- タイトル
- テキストテキストテキストテキストテキスト
- タイトルタイトルタイトルタイトル
- テキストテキスト
- タイトル
- テキストテキストテキストテキスト
- タイトルタイトルタイトル
- テキスト
- タイトル
- テキストテキストテキストテキストテキスト
- タイトルタイトルタイトルタイトルタイトルタイトルタイトル
- テキストテキストテキストテキストテキストテキストテキストテキストテキスト
- タイトル
- テキストテキストテキストテキストテキスト
- タイトルタイトルタイトル
- テキスト
<dl>
<dt>タイトル</dt>
<dd>テキストテキストテキストテキストテキスト</dd>
</dl>
<dl>
<dt>タイトルタイトルタイトルタイトル</dt>
<dd>テキストテキスト</dd>
</dl>
<dl>
<dt>タイトル</dt>
<dd>テキストテキストテキストテキスト</dd>
</dl>
<dl>
<dt>タイトルタイトルタイトル</dt>
<dd>テキスト</dd>
</dl>
<dl>
<dt>タイトル</dt>
<dd>テキストテキストテキストテキストテキスト</dd>
</dl>
<dl>
<dt>タイトルタイトルタイトルタイトルタイトルタイトルタイトル</dt>
<dd>テキストテキストテキストテキストテキストテキストテキストテキストテキスト</dd>
</dl>
<dl>
<dt>タイトル</dt>
<dd>テキストテキストテキストテキストテキスト</dd>
</dl>
<dl>
<dt>タイトルタイトルタイトル</dt>
<dd>テキスト</dd>
</dl>
</div>
「fixHeight」クラス内の子要素を指定
「fixHeight」クラス内の子要素に「fixHeightChild」クラスを付けることによって
その要素の高さを揃えることができます。
この場合、「fixHeight」クラス直属にあるdlの高さは揃えられません。
下記はタイトルの高さを揃えてみました。
- タイトル
- テキストテキスト
- タイトルタイトルタイトルタイトルタイトルタイトル
- テキストテキストテキストテキストテキスト
- タイトル
- テキストテキストテキストテキスト
- タイトルタイトルタイトル
- テキスト
<dl>
<dt class=”fixHeightChild”>タイトル</dt>
<dd>テキストテキスト</dd>
</dl>
<dl>
<dt class=”fixHeightChild”>タイトルタイトルタイトルタイトルタイトルタイトル</dt>
<dd>テキストテキストテキストテキストテキスト</dd>
</dl>
<dl>
<dt class=”fixHeightChild”>タイトル</dt>
<dd>テキストテキストテキストテキスト</dd>
</dl>
<dl>
<dt class=”fixHeightChild”>タイトルタイトルタイトル</dt>
<dd>テキスト</dd>
</dl>
</div>
「fixHeightChild」クラスをグループ化して複数指定
「fixHeight」クラス内の複数子要素をグループ化し高さを合わせます。
「fixHeightChild●●●●」●●●●に任意の文字を入力すればグループ化できます。
今回はタイトルに「fixHeightChild_title」、テキストに「fixHeightChild_text」というクラスを付けてみたいと思います。
それぞれのタイトル部分とテキスト部分の高さを揃えることによってdlの高さも自動的に揃えられます。
- タイトル
- テキストテキストテキストテキストテキスト
- タイトルタイトルタイトルタイトル
- テキストテキスト
- タイトル
- テキストテキストテキストテキスト
- タイトルタイトルタイトル
- テキスト
- タイトル
- テキストテキストテキストテキストテキスト
- タイトルタイトルタイトルタイトルタイトルタイトルタイトル
- テキストテキストテキストテキストテキストテキストテキストテキストテキスト
- タイトル
- テキストテキストテキストテキストテキスト
- タイトルタイトルタイトル
- テキスト
<dl>
<dt class=”fixHeightChild_title”>タイトル</dt>
<dd class=”fixHeightChild_text”>テキストテキストテキストテキストテキスト</dd>
</dl>
<dl>
<dt class=”fixHeightChild_title”>タイトルタイトルタイトルタイトル</dt>
<dd class=”fixHeightChild_text”>テキストテキスト</dd>
</dl>
<dl>
<dt class=”fixHeightChild_title”>タイトル</dt>
<dd class=”fixHeightChild_text”>テキストテキストテキストテキスト</dd>
</dl>
<dl>
<dt class=”fixHeightChild_title”>タイトルタイトルタイトル</dt>
<dd class=”fixHeightChild_text”>テキスト</dd>
</dl>
<dl>
<dt class=”fixHeightChild_title”>タイトル</dt>
<dd class=”fixHeightChild_text”>テキストテキストテキストテキストテキスト</dd>
</dl>
<dl>
<dt class=”fixHeightChild_title”>タイトルタイトルタイトルタイトルタイトルタイトルタイトル</dt>
<dd class=”fixHeightChild_text”>テキストテキストテキストテキストテキストテキストテキストテキストテキスト</dd>
</dl>
<dl>
<dt class=”fixHeightChild_title”>タイトル</dt>
<dd class=”fixHeightChild_text”>テキストテキストテキストテキストテキスト</dd>
</dl>
<dl>
<dt class=”fixHeightChild_title”>タイトルタイトルタイトル</dt>
<dd class=”fixHeightChild_text”>テキスト</dd>
</dl>
</div>
このJavaScriptが便利なところは行ごとのグループを自動で判断して、
高さを調整してくれるところです。
これにより、レスポンシブなどで横の列の数が変更されても問題なく動作します。
試しにブラウザの幅を縮めてからF5を押して、更新してみてください。
行ごとのブロックの高さが自動で調整されたかと思います。
ダウンロードは下記からになります。
http://www.starryworks.co.jp/blog/tips/fixheightjs.html
是非ご活用頂ければと思います。