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

I'll be NET BLOG

なにかの役には立つかもしれない。

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

記事移動

関連記事

関連エントリーはありません。

コメント登録

  • コメントを入力してください。
登録フォーム
名前
メールアドレス
URL
コメント
閲覧制限
投稿キー(スパム対策に、投稿キー を半角で入力してください。)

ユーティリティ

プロフィール

author:I'll be NET

since:2014.01.01

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

more

日記検索

エントリー検索フォーム
キーワード

Feed

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