I'll be NET】創作サイトから中小企業まで東京都三鷹市で低価格高品質なホームページ制作(SOHO)

トップページ > 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>

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

関連記事

Instagramの写真一覧をサイトに表示する方法

Instagramの写真一覧をサイトに表示する方法

サムネイル画像をクリックするとメイン画像をふわっと切り替えるjQuery

HTML上の要素の位置を変更するjQuery

HTML上の要素の位置を変更するjQuery

JavaScriptで現在のURLを取得する方法

ロード時やスクロール時にふわっと表示させるjQuery

ロード時やスクロール時にふわっと表示させるjQuery

pixiv小説のように縦書き表示する方法-2019版

pixiv小説のように縦書き表示する方法-2019版

Comment Form

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

Profile

yuricolo@I'll be NET

東京都を拠点としたSOHO(フリーランス)による創作サイト向けWEB制作サービスを行っています。 お仕事とか創作活動とかでメモっておきたいこととかを掲載しています。