マーカーネット株式会社

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制作

執筆者:

関連記事

簡単レシピ!アメコミ風デザイン素材と活用法!!

今回はアメコミ風のデザインを作るときに役立つフリー素材と活用法をご紹介いたします。 まずは実際のアメコミを見て、簡単に特徴を分析してみます。 アメコミでgoogle画像検索をかけると、、、 とってもカ …

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

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

デザイナーのAです。こんにちは。 今日はお客様の立場になって、 WEB制作における良いデザインと悪いデザインの見分け方についてご紹介できればと思います。 デザイナーにとっては、基本的なことでも、以外と …

Movable Type6を操作してみました

Movable Type6を操作してみました

先日リリースされました、movable type6を操作していました。 – ダッシュボード グーグルアナリティクスをアカウント設定しますと、 サイト情報欄に、アクセスの情報が表示されます。 …

phpフレームワークlaravel4でデータベースを操作してみました。

phpフレームワークlaravel4でデータベースを操作してみました。

phpのフレームワークlaravel4でデータベースの操作をためしました。 laravel4では、「Eloquent ORM」が含まれており、簡単にデータベースの操作が可能です。 1. 今回ブログの記 …

javascriptの便利なライブラリについて

javascriptの便利なライブラリについて

オブジェクト(配列)や文字列の処理は自作の作成した場合、時間を要してしまします。 そこで、これらの処理をおこなう際に便利なJavascriptライブラリを紹介します。 1. underscore.js …