ご相談・お問い合わせご相談・お問い合わせ 電話0120-800-804

ボックスの高さを揃えたい!そんな時に便利なJQueryプラグイン

ワードプレス
ボックスの高さを揃えたい!そんな時に便利なJQueryプラグイン

CSSを編集しているとき、横幅を揃えるのは比較的スムーズに実現できても、縦幅を揃えるのになかなかに苦戦したという方も多いのではないでしょうか?縦幅は、横幅と異なり、要素の中のコンテンツ量や、隣接する要素の影響を受けやすく、調整するには少し難易度の高い処理を行う必要があります。ですが、この調整を飛躍的に楽にしてくれるJQueryが開発されています。うまく活用して、工数を削減しましょう。

高さを揃えたい場面の一例

高さを揃えたい場面の最たるものは、サイドカラムとコンテンツエリアをfloatで処理している時ではないかと考えています。
こうした2カラムのホームページは、コンテンツ量がページによってばらばらであることがほとんどで、あるページでは正しく表示されているが、コンテンツ量が極端に少ない、もしくは極端に多いページにおいて崩れてしまうというのは良く起こりがちな問題と言えるでしょう。

また、floatを利用してボックスを複数個並べたい場合、中のコンテンツの量がばらばらだと、高さが異なりちぐはぐな見え方になってしまいます。
あらかじめ高さを指定しておくことも考えられますが、この場合は、コンテンツ量が多くなってしまった場合、ボックスをはみ出してしまうという問題が新たに浮上します。

このように、floatを利用してボックスを横並びにしたいといった場合、縦幅の調整は意外と苦労するものなのです。

レスポンシブホームページにも対応したjquery.heightLine.js

こうした厄介な縦幅の調整を手軽に行ってくれるのが、jquery.heightLine.js(http://blog.webcreativepark.net/2013/10/21-112000.html)です。
Jqueryとこのプラグインを読み込んでおくことで、高さを揃えたいクラスを指定すると、そのクラスが付与された要素の中でも最も縦幅が大きな要素の縦幅に揃えてくれます。

また、意外と多いケースで、PC版ではfloatを多用するので高さを揃えたい場合が多いけれども、スマホ版ではfloatは利用しないので不要、むしろ縦幅を合わせに行くと余分な空白が増えてしまって困るというような場合があります。
この場合も、ウインドウサイズが特定の範囲のみ高さを揃えるという処理ができますので、レスポンシブホームページを制作する際の強い味方となってくれるでしょう。

さらに、このプラグインは、JQueryを利用しているため、動的なコンテンツ処理にも強いという特徴があります。
テキストの自動読み込みなどで逐一コンテンツ量が変わる、けれどもそれに合わせて高さも自動で調整したい…というような場合、このプラグインが保持しているリフレッシュ機能を利用することで、その時点での必要な縦幅を計算し、高さ調整を行ってくれます。

jquery.heightLine.jsは高さ調整に関して、多くのコーダーやエンジニアが悩んできた事項を一気に解決してくれる、かゆいところに手が届く大変ありがたいプラグインなのです。

気軽に利用できるheightLine.js

実は上記で紹介したjquery.heightLine.jsの前身がこのheightLine.js(http://sole-color-blog.com/blog/php/71/)になります。
JQueryプラグインではなく、純粋な形でのjavascriptとなり、JQuery版と比較するとやや機能面で劣りますが、それでも高さを調整してくれる機能は健在です。
JQueyプラグインと比較すると、実装が簡単というメリットがありますので、ケースに応じて使い分けるとよいでしょう。

jquery.heightLine.jsは、JQueryのコードによって、高さを揃える要素を指定しに行きますが、これに対してheightLine.jsは、あらかじめHTMLにて、高さを揃えたい要素にクラス名を付与しておくという違いがあります。
クラス名の付与のしかたはいくつかあるのですが、もっとも単純な高さを揃えたい要素に同じクラス名を付与するというやり方の他、クラス名を付与した要素の子要素の高さを揃えるというような付与のしかたもあります。

CSSの記述によっても実現できるがコードが複雑になりがち

高さを揃える記述は、CSSでも同様のことが実現可能です。
CSS3が全盛となっている現在では、CSS3を利用して記述した方が綺麗なソースコードとなるかもしれません。
ですが、CSSによる高さの調整に慣れていない場合、かえってソースコードが複雑になって読みづらいものになってしまうリスクは否定できるものではありません。
さらに、現場ホームページ制作の現場においては、すでに制作されたホームページに手を加えるというケースが多いものです。

そのたびにCSSを調整するという工数を発生させてしまうよりは、こうしたJQueryやJavaScriptを利用して解決することができるということを覚えておくと、いざという時に瞬時に対応することができます。
是非、あなたのコーディングの選択肢のひとつとして、検討してみてください。

ReEight MAGAZINE

いいねして最新情報をチェック!

矢印アイコン
無料サイト診断サービス

WEBサイトに関してお困りなことはありませんか?

私たちは制作だけではなく、SEO、マーケティング、ブランディング、など
WEBに関して総合的な知見を持ち合わせており、
WEBサイトを最大限に活用するためのノウハウを蓄積しております。
御社が抱えている事業課題を私たちならきっと解決できると考えています。

お気軽にお問い合わせください。

フォームでのお問い合わせ

メールご相談・お問い合わせ

お電話でのお問い合わせ

電話
0120-800-804受付時間10:00〜18:00

WEBサイトに関することなら
お気軽にお問い合わせください。

フォームでのお問い合わせ

お見積り依頼やご相談・ご質問は
お問い合わせフォームをご活用ください。

メールご相談・お問い合わせ

お電話でのお問い合わせ

お急ぎの方や詳しく話を聞きたい方は
お電話ください。

電話
0120-800-804受付時間10:00〜18:00
サイトマップ プライバシーポリシー Copyright © re-eight.inc. All Right Reserved.