マーカーネット株式会社

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

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


-javascript(jquery), WEB制作

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

ホームページ制作にかかわる肩書別完成するまでのプロセスまとめ

ホームページ制作にかかわる肩書別完成するまでのプロセスまとめ

WEBデザイナー、WEBディレクター、WEBプログラマー、WEBプロデューサー、プランナー、ライター、営業さん、ときおりカメラマンANDクライアント。とまぁたったひとつのホームページが出来上がるまでに …

【多言語サイトデザインの参考になる!】世界のWEBデザインギャラリーサイト

【多言語サイトデザインの参考になる!】世界のWEBデザインギャラリーサイト

本日はクリスマス、また一年の終わりが近ついてきましたが、 皆さんはいかがお過ごしでしょうか? サイトのデザイン制作に入る前に、よくWEBデザインギャラリーサイトで同じ業種やジャンルのサイトを参考してか …

食べ物の写真を美味しそうにみせるフォトショの小ネタ

こんにちは! デザイナーの木野子です。 マーカーネットブログを、今回初めての担当することになりました! ここでは、私が普段web製作で使っている、 PhotoshopやIllustratorの小ネタな …

オンライン上で複数のPDFファイルを結合(連結)させる方法【MERGE PDF】

オンライン上で複数のPDFファイルを結合(連結)させる方法【MERGE PDF】

今日はあんまり面白い記事が見つからなかったので、ちょっと趣向を変えて、日常のWEB制作フローのなかで重宝しているものの中からひとつ紹介します。 WEB制作の業界に限ったことだけではないかもしれませんが …

デザイナーの常識!? いいデザインと悪いデザインの見分け方 その(3)

デザイナーの常識!? いいデザインと悪いデザインの見分け方 その(3)

こんにちは、デザイナーのAです。 以前、いいデザインと悪いデザインの見分け方についてご紹介いたしました。 いいデザインと悪いデザインの見分け方 その(1) いいデザインと悪いデザインの見分け方 その( …