> JavaScript/jQuery > 複数のカラムの高さを最大値に揃えてくれるjQueryプラグイン「jQueryAutoHeight.js」

複数のカラムの高さを最大値に揃えてくれるjQueryプラグイン「jQueryAutoHeight.js」

ホームページでグリッドデザインなどにする時、複数のカラムの高さを自動的に揃えるには、jQueryAutoHeit.jsを紹介します。

jqueryautoheight.png

jQueryAutoHeit.jsとは

jQueryAutoHeight.js とは、複数のボックスの高さを自動的にそろえるシンプルな jQueryプラグインです。

「セレクタで指定したすべての要素を、その中の最大値にそろえる」か、「セレクタで指定した要素を、オプションで渡した数ごとに、その中の最大値にそろえる(1行ごとにそろえられる)」ことができます。

DEMO

ダウンロード

スクリプトは下記URLからダウンロードしてください。

かたつむりくんのWWW|jQueryAutoHeight.js - 複数のカラムの高さを最大値にそろえるjQueryプラグイン
https://github.com/tinybeans/jQueryAutoHeight

利用方法

基本的なhtml(<head>タグ内)の記述

下記のように高さを揃えたいセレクタにautoHeightを設定します。

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jQueryAutoHeight.js"></script>
<script type="text/javascript">
jQuery(function($){
    $(揃えたいセレクタ).autoHeight();
});
</script>

高さを揃える要素内に画像が入っている場合のhtml(<head>タグ内)の記述

高さを揃えたい要素内に画像が入っている場合は、画像読み込み後にjQueryが実行されるようにします。

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jQueryAutoHeight.js"></script>
<script type="text/javascript">
    jQuery.event.add(window,"load",function() { 
        $('揃えたいセレクタ').autoHeight();
    });
</script>

この記事が気に入ったらシェアしてください

関連記事

jQueryでチェックボックスを操作する方法まとめ【2021年版】

jQueryでチェックボックスを操作する方法まとめ【2021年版】

jQueryプラグイン「Colorbox」でYoutube動画をモーダルで表示してみる(レスポンシブ対応済)

jQueryプラグイン「Colorbox」でYoutube動画をモーダルで表示してみる(レスポンシブ対応済)

jQueryプラグイン「Colorbox」でHTMLタグや外部HTMLファイルをモーダルで表示してみる

jQueryプラグイン「Colorbox」でHTMLタグや外部HTMLファイルをモーダルで表示してみる

簡単にモーダルウィンドウを実装できるjQueryプラグイン「Colorbox」

簡単にモーダルウィンドウを実装できるjQueryプラグイン「Colorbox」

SyntaxHighlighterでの表示を色々カスタマイズしてみる

SyntaxHighlighterでの表示を色々カスタマイズしてみる

クリックするとトリガーが×になるドロワーメニュー

クリックするとトリガーが×になるドロワーメニュー

Comment Form

コメント投稿はこちらをクリックしてください
  • コメントを入力してください。
登録フォーム
Name
Mailaddress
URL
Message
Postkey
(スパム対策に、投稿キー を半角で入力してください。)