WEB

見た目を綺麗に整列する!ブロックレベル要素の高さを揃えるJS3選

見た目を綺麗に整列する!ブロックレベル要素の高さを揃えるJS3選

お疲れ様です、デザイナーのモモコです。

コーディング中にいざ本番の文言を入れたら、予想以上に長さがバラバラで見た目が揃わない…!なんてこと、ありますよね。
今回はそんな時に活躍してくれるブロックレベル要素の高さを揃えるjsを3つご紹介します。

ブロックレベル要素の高さを揃えるJS3選

heightLine.js

heightline

<script type="text/javascript" src="heightLine.js"></script>

class名のつけ方によって高さを揃える要素をコントロールできるJavascriptです。
子要素の高さを統一できる「heightLineParent」が便利で良くお世話になっていました。

jQueryAutoHeight.js

jqueryautoheight

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jqueryAutoHeight.js"></script>
<script type="text/javascript">
jQuery(function($){
    $(div.hoge p).autoHeight();
});
</script>

便利なオプションがあるjqueryプラグインです。
一行に揃えたい要素数を指定し、行ごとにclear:bothをかけられるのは良いですね!
min-heightとheightが選べるのもありがたいです。

jquery.tile.js

jquerytile

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.tile.js"></script>
<script type="text/javascript">
$(function() {
  $(".hoge1").tile();
  $(".hoge2").tile(4); //要素数を指定
});
</script>

シンプルで使いやすいjqueryプラグインです。
classを振った要素全てを同じ高さに揃える、もしくは要素数を指定することで一行ごとに高さを揃える事ができます。
使い勝手が良いので、最近はこちらのプラグインをよく使用しています!

まとめ

高さが自動的に揃うと見た目が綺麗ですが、極端に文言の差があると揃えた高さとの間にマージンがたっぷり空いてしまったりしてこれまた悩みどころだったりしますよね…。
要素の更新頻度など、様々なシチュエーションに合わせて柔軟に対応出来るようにしたいです。

この記事を書いた人

モモコ
モモコ デザイナー 2010年入社
デザイナーのモモコです。ジャンプは単行本派です、よろしくお願い致します。

こちらもおすすめ

確かな力が身につくJavaScript「超」入門 (確かな力が身につく「超」入門シリーズ)

確かな力が身につくJavaScript「超」入門 (確かな力が身につく「超」入門シリーズ)

  • 著者狩野 祐東
  • 価格¥ 2,678(2015/12/21 16:29時点)
  • 出版日2015/10/30
  • 商品ランキング3,840位
  • 単行本320ページ
  • ISBN-104797383585
  • ISBN-139784797383584
  • 出版社SBクリエイティブ