- Coding Methodology
- 第36回 JavaScriptで自動的に高さを揃える
第36回 JavaScriptで自動的に高さを揃える
Webサイト制作の現場では、PHPやPerlなどのサーバサイド言語で、またはWordPressやMovableTypeなどのCMSで、<div>タグや<li>タグなどを動的に複数出力するシーンが多くあります。コーディングファクトリーでは、そういったサーバサイド言語の開発負担を軽減するための、クライアントサイドでの処理テクニックの一つをご紹介します。
動的に出力した要素の高さが異なる場合、レイアウトが崩れてしまう
サーバサイドでタグを動的に複数出力し、レイアウト1段目に<li>をfloatで3つ配置、2段目にも<li>を3つ配置・・・といった構成の場合、テキスト量によっては要素の高さが異なってしまい、レイアウトが崩れる原因ともなります。
（図1）
これをサーバサイドで処理する場合、<li>を3回繰り返した後、一度</ul>で閉じる、といった処理を行い、「テキストその4」のボックスの回りこみを回避します。
また、高さを揃える際によく使用されるheightLine.jsを使用した場合にも、<li>を動的に出力する際、3個ごとに異なるクラス名を付与していかなければなりません。
「opensocial-jquery.autoHeight.js 」でレイアウトを自動調整
そんな時の力強いお供になるのが、jQueryのプラグインの一つ、「jqueryAutoHeight.js」です。このjsは、テキストを含む要素の高さの値を取得し、横1列の高さを自動的に揃えてくれます。(図2)
実装の仕方も簡単で、該当するページでjqueryAutoHeight.jsを読み込ませ、高さを揃えたい要素と、その要素の数を指定するだけです。
【コード解説】
- ※1下記URLからopensocial-jquery.autoHeight.jsをダウンロードし、格納先のパスを記載する。
http://code.google.com/p/opensocial-jquery/wiki/PluginAutoHeight - ※2対象となる要素を指定する。
- ※3高さを揃えたい要素の数を指定する。
「opensocial-jquery.autoHeight.js」を実装するだけで、サーバサイドの繰り返し処理が省かれるので、PHP・PerlやWordPress・MovableTypeでの動的出力を実装する場合には是非お勧めしたいです。
もちろん、タグの動的出力の実装がなく静的なhtmlコーディングだけの場合でも、自動的に対象要素の高さを揃えてくれるので、レイアウト調整で役立つ事も多いのではないでしょうか。
