JavaScript

高さや幅が不揃いの要素をキレイに揃えてくれるjQueryプラグイン「equalize.js」

高さや幅が不揃いの要素をキレイに揃えてくれるjQueryプラグイン「equalize.js」を使ってみました。記述もシンプルでとても使いやすいプラグインです。デフォルトではheight(高さ)を揃えてくれるんですが、他にもouterHeight、innerHeight、width、outerWidth、innerWidthのいずれかを指定することで揃えることもできます。

[ads_center]

使い方

jQueryとダウンロードしたプラグインを読み込みます。

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js?ver=1.7.1'></script>
<script src="js/equalize.js" type="text/javascript"></script>

不揃いの要素群を内包している親要素をセレクタに指定してあげます。

<script type='text/javascript'>
$(function(){
    $('#sample').equalize();
});
</script>

HTMLはこんな感じで。

<div id="sample">
    <div>sample</div>
    <div>sample text</div>
    <div>sample text sample text</div>
    <div>sample text</div>
    <div>sample</div>
    <div>sample text</div>
    <div>sample text sample text</div>
    <div>sample text</div>
    <div>sample</div>
    <div>sample text</div>
    <div>sample text sample text</div>
    <div>sample text</div>
</div>

このように、とても簡単に高さを均一に表示させることができます。

高さを均一にする

また、幅を均一にしたい場合には以下のように width を指定します。

<script type='text/javascript'>
$(function(){
    $('#sample').equalize('width');
});
</script>

すると、こんな感じで幅を均一にすることができます。

幅を均一にする

というわけで、不揃いな高さや幅を簡単に均一に表示させたいといった場合には、このプラグインを使えば一瞬にして揃えることができます。使い方もシンプルなのでオススメです。

ダウンロードは以下からどうぞ。

JPEG画像のファイルサイズを小さく軽量化してくれるMacアプリ「JPEGmini」前のページ

AmazonのKindle Paperwhite 3Gを予約してみた!次のページ

関連記事

  1. Yet Another Ripple Plugin
  2. no-image

    JavaScript

    シンプルなバナースライドショーを実装できる「jsslider」

    jssliderはシンプルなバナースライドショーを実装できるjQuer…

  3. JavaScript

    ぼかし背景を画像から作成できるjQueryプラグイン「Blurr」

    BlurrというjQueryプラグインを使えば、ぼかし背景を画像から簡…

  4. no-image

    JavaScript

    続きを読むボタンを実装できる「ReadMorePlugin」

    ReadMorePluginは「続きを読む」、「もっと読む」、「Rea…

  5. Docked Link jQuery Plugin
  6. JavaScript

    シンプルでスタイリッシュなLightbox風のjQueryプラグイン「Featherlight」

    シンプルでスタイリッシュなデザインが特徴的なLightbox風のjQu…

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

最近の記事

  1. すしざんまい
  2. 蒼龍唐玉堂 特製牛バラ担々麺
  3. サーモンアボカドサラダラップとドリップ
  4. 猿田彦フレンチ
  5. Zarigani Curry 挽肉のカレー ゴーダチーズとピクルスを添えて

アーカイブ

PAGE TOP