マーカーネット株式会社

WEB制作ブログ WEBデザイン、HTMLコーディング、PHP、スマートフォン制作などWEB制作全般に役立つ情報を発信していきます。

javascript(jquery) WEB制作

レスポンシブにも対応!行ごとのブロック要素の高さを自動で合わせる方法。

投稿日:2014年11月17日 更新日:

ブロック要素の高さを揃えるJavaScriptはいくつかあります。
その中でも行ごとの高さを変えたい場合に便利な「fixHeight.js」をご紹介します。

「fixHeight.js」の設置方法

まずjQueryを読み込ませます。

<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js”></script>

そのあとに「fixHeight.js」を読み込みます。

<script src=”[ファイルへのパス]/fixHeight.js”></script>

これで設置は完了です。

スタンダードな「fixHeight.js」の使い方

まずはスタンダードにブロック要素の高さを合わせてみます。
長いタイトルや内容などをの高さは無視して行ごとのdlの高さを合わせます。
親要素のクラスに「fixHeight」を付けるだけで揃えてくれます。

タイトル
テキストテキストテキストテキストテキスト
タイトルタイトルタイトルタイトル
テキストテキスト
タイトル
テキストテキストテキストテキスト
タイトルタイトルタイトル
テキスト
タイトル
テキストテキストテキストテキストテキスト
タイトルタイトルタイトルタイトルタイトルタイトルタイトル
テキストテキストテキストテキストテキストテキストテキストテキストテキスト
タイトル
テキストテキストテキストテキストテキスト
タイトルタイトルタイトル
テキスト
<div class=”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の高さは揃えられません。
下記はタイトルの高さを揃えてみました。

タイトル
テキストテキスト
タイトルタイトルタイトルタイトルタイトルタイトル
テキストテキストテキストテキストテキスト
タイトル
テキストテキストテキストテキスト
タイトルタイトルタイトル
テキスト
<div class=”fixHeight”>
<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の高さも自動的に揃えられます。

タイトル
テキストテキストテキストテキストテキスト
タイトルタイトルタイトルタイトル
テキストテキスト
タイトル
テキストテキストテキストテキスト
タイトルタイトルタイトル
テキスト
タイトル
テキストテキストテキストテキストテキスト
タイトルタイトルタイトルタイトルタイトルタイトルタイトル
テキストテキストテキストテキストテキストテキストテキストテキストテキスト
タイトル
テキストテキストテキストテキストテキスト
タイトルタイトルタイトル
テキスト
<div class=”fixHeight”>
<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

是非ご活用頂ければと思います。


東京のWEB制作会社 マーカーネット株式会社 公式WEBサイトへ

-javascript(jquery), WEB制作

執筆者:

関連記事

多言語対応で1000億円の経済効果!WEBサイトも多言語化を

多言語対応で1000億円の経済効果!WEBサイトも多言語化を

近ごろのニュースで、訪日観光客の増加という記事をよく見かけるようになりました。東京の街を歩いても日本への訪日客が増えたことを実感できるほど外国語が飛び交ってますね。2015年は【多言語化元年】と言われ …

中国でWEBサイトマーケティング考えてる方への 両国の大きな違い②

一般的にWEBサイトを展開する場合、最初に考えることの一つにドメインの問題があります。 中国でも.comなどの一般的なドメインは.cnよりも簡単に取得可能ですが、その先にICP登録という問題があります …

no image

【デザイナー必見!】 ロゴデザインをつくるとき役立つ4つのサイトをご紹介

WEB制作会社というと、ホームページデザインのイメージが強いと思いますが、 マーカーネットではロゴデザインの制作も承っています。 そこで、今回はロゴデザインを作成する際、参考になるサイトについてご紹介 …

【Illustrator】アーガイル模様の作り方

みなさまこんにちは、新人Aです。 今日はまたIllustratorを使って、パターンのお話を。 以前は七宝柄、タータンチェックときて・・・今日はアーガイル柄を作りたいと思います。 アーガイル柄といえば …

WEBトレンド!?パーツの動きに注目!!~素敵サイトの旅 その2~

明けましておめでとうございます。web初心者のKです! 本年もどうぞよろしくお願いいたします。 みなさま、お正月はいかがお過ごしでいたでしょうか? 私はあまりに寒すぎて冬眠できないかな~、と、 食いだ …