お疲れ様です、デザイナーのモモコです。
コーディング中にいざ本番の文言を入れたら、予想以上に長さがバラバラで見た目が揃わない…！なんてこと、ありますよね。今回はそんな時に活躍してくれるブロックレベル要素の高さを揃えるjsを3つご紹介します。
ブロックレベル要素の高さを揃えるJS3選
heightLine.js
<script type="text/javascript" src="heightLine.js"></script>class名のつけ方によって高さを揃える要素をコントロールできるJavascriptです。
子要素の高さを統一できる「heightLineParent」が便利で良くお世話になっていました。
jQueryAutoHeight.js
配布ページ※このページは現在削除されています。
<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
配布ページ※このページは現在削除されています。
<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を振った要素全てを同じ高さに揃える、もしくは要素数を指定することで一行ごとに高さを揃える事ができます。
使い勝手が良いので、最近はこちらのプラグインをよく使用しています！
まとめ
高さが自動的に揃うと見た目が綺麗ですが、極端に文言の差があると揃えた高さとの間にマージンがたっぷり空いてしまったりしてこれまた悩みどころだったりしますよね…。
要素の更新頻度など、様々なシチュエーションに合わせて柔軟に対応出来るようにしたいです。
LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。
