コーディングメソドロジー

第36回 JavaScriptで自動的に高さを揃える

Webサイト制作の現場では、PHPやPerlなどのサーバサイド言語で、またはWordPressやMovableTypeなどのCMSで、<div>タグや<li>タグなどを動的に複数出力するシーンが多くあります。コーディングファクトリーでは、そういったサーバサイド言語の開発負担を軽減するための、クライアントサイドでの処理テクニックの一つをご紹介します。

動的に出力した要素の高さが異なる場合、レイアウトが崩れてしまう

JavaScriptで自動的に高さを揃える

サーバサイドでタグを動的に複数出力し、レイアウト1段目に<li>をfloatで3つ配置、2段目にも<li>を3つ配置・・・といった構成の場合、テキスト量によっては要素の高さが異なってしまい、レイアウトが崩れる原因ともなります。
(図1)

これをサーバサイドで処理する場合、<li>を3回繰り返した後、一度</ul>で閉じる、といった処理を行い、「テキストその4」のボックスの回りこみを回避します。

また、高さを揃える際によく使用されるheightLine.jsを使用した場合にも、<li>を動的に出力する際、3個ごとに異なるクラス名を付与していかなければなりません。

「opensocial-jquery.autoHeight.js 」でレイアウトを自動調整

JavaScriptで自動的に高さを揃える

そんな時の力強いお供になるのが、jQueryのプラグインの一つ、「jqueryAutoHeight.js」です。このjsは、テキストを含む要素の高さの値を取得し、横1列の高さを自動的に揃えてくれます。(図2)

実装の仕方も簡単で、該当するページでjqueryAutoHeight.jsを読み込ませ、高さを揃えたい要素と、その要素の数を指定するだけです。

【コード解説】

JavaScriptで自動的に高さを揃える

「opensocial-jquery.autoHeight.js」を実装するだけで、サーバサイドの繰り返し処理が省かれるので、PHP・PerlやWordPress・MovableTypeでの動的出力を実装する場合には是非お勧めしたいです。
もちろん、タグの動的出力の実装がなく静的なhtmlコーディングだけの場合でも、自動的に対象要素の高さを揃えてくれるので、レイアウト調整で役立つ事も多いのではないでしょうか。

  • 大規模サイト制作のご案内 大規模サイトプロジェクトのポイントやサービス内容をご紹介
  • レスポンシブWebデザインセミナーがDVDになりました。
  • コーディングメソドロジー
  • コーディングファクトリートピックス
  • 受注活動サポートサービス
  • コーディングファクトリーニュース
  • IllustratorでのWebデザイン
  • 求人案内
  • 株式会社モノサス
  • お問い合わせ

    コーディング相談ダイヤル

    お問い合わせ

  • ご相談、お問い合わせフォーム

    ご相談、お問い合わせフォーム