マーカーネット株式会社

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

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

関連記事

面白い動きや便利な機能をJSで実装! その2:いろんな種類のグラフを簡単に作成!

面白い動きや便利な機能をJSで実装! その2:いろんな種類のグラフを簡単に作成!

以前ご紹介しました面白い動きや便利な機能をJSで実装! その1:簡単にグラフを作成する方法!の応用編になります。 前回は折れ線グラフをご紹介致しましたが、今回は「棒グラフ」「レーダーチャート」「円グラ …

WEBトレンド+αの作り込みで、心地よさが広がる素敵サイトをご紹介! ~素敵サイトの旅 その1~

WEBトレンド+αの作り込みで、心地よさが広がる素敵サイトをご紹介! ~素敵サイトの旅 その1~

こんにちは!風邪っぴきのweb初心者Kです。 週末に風邪を治しきれず、咳のため未だマスクが手放せません。 今日は誰とも口をきけないかも知れない!!! みなさまはお風邪など召されていませんか? さてさて …

ワードプレスのテーマの安全性をチェックしてくれる実用的なプラグイン

ワードプレスのテーマの安全性をチェックしてくれる実用的なプラグイン

WordPressのセキュリティを高めてくれるシンプルだけれども実用的なプラグインです。 名前もシンプルです。「AntiVirus」 WordPressで使用しているテーマに悪意のあるコードやセキュリ …

【世界一カンタン?!】1枚の画像だけでロールオーバーをさせる方法

【世界一カンタン?!】1枚の画像だけでロールオーバーをさせる方法

画像のロールオーバーって面倒ですよね。 2枚の画像を用意してJavascriptで制御して、、や背景画像していしてh overで、、 というのが一般的ですが、 今回は画像1枚だけ。CSSに4行記載する …

デザインの幅が広がる!クオリティの高いイラストサイトまとめ

みなさん こんばんは! デザイナーKです! 今回、私が皆さんにご紹介する内容は! 仕事で使えるイラスト素材サイトです!! 1.ほらぱれっと 私が好きなパステルトーンの可愛い素材が揃っているサイトです。 …