jQuery Equal Height

JavaScript

異なる要素の高さを揃えてくれる「jQuery Equal Height」

jQuery Equal Heightは、異なる要素の高さをキレイに揃えてくれる軽量のjQueryプラグインです。カラムの高さだけではなく、カラム内に含まれるタイトルやテキストといった高さも揃えてくれるので、レイアウトにこだわりたい人にはピッタリのjQueryプラグインですね。

jQuery Equal Height

デモ

デモページでは、高さの処理を何も施されていない「Normal Cards」をはじめ、カードの高さを揃えた「Cards With Equal Height」、カードとその中にあるテキストの高さを揃えた「Cards With Equal Height and Text」、カードとその中にあるテキストとタイトルの高さを揃えた「Cards With Equal Height, Text and Title」の4つのサンプルが用意されています。

Normal Cardsと比較してみると、やはり高さの揃ったレイアウトはとてもスッキリしていてキレイですね。特に、カード内に表示されているテキストとタイトルも揃っている「Cards With Equal Height, Text and Title」はとても見やすいと思います。

ブログのトップページや記事下に設置する関連記事など、いろんなところに活用できるのではないでしょうか?

ファイル容量が軽量に仕上がっているのもうれしいポイントになるはず。また、デモはレスポンシブにも対応しているので、さまざまなブラウザ幅に最適になるようにレイアウトが可変します。

使い方もシンプルで手軽に実装できるのがグッドです。というわけで、異なる要素の高さを揃えてくれるjQueryプラグイン「jQuery Equal Height」の紹介でした。

jQuery Equal Height

no-imageリッチキャプションを備えたイメージビューア「CaptionBox」前のページ

スマートでハイパフォーマンスな追尾型サイドバー実装「Sticky Sidebar」次のページSticky Sidebar

関連記事

  1. cubeTransition.js

    JavaScript

    3Dキューブのようなスライダーを実装できる「cubeTransition.js」

    cubeTransition.jsは、CSS 3DトランスフォームとC…

  2. ZooMove

    JavaScript

    マウスオーバーで画像を拡大ズーム・移動もできるjQueryプラグイン「ZooMove」

    ZooMoveは、マウスオーバーで指定された画像やエリアをズームするこ…

  3. Rollerblade.js

    JavaScript

    画像を360度回転させて見せることができるjQueryプラグイン「Rollerblade.js」

    Rollerblade.jsというjQueryプラグインを使えば、画像…

  4. Turntable.js

    JavaScript

    画像を使ってストップモーション動画のような効果を実装できる「Turntable.js」

    Turntable.jsは複数の画像を使ってストップモーション動画のよ…

  5. Zooming

    JavaScript

    クールな画像ズーム機能を実装できる「Zooming」

    Zoomingはクールでかっこいい画像ズーム機能を実装することができる…

  6. justContext.js

    JavaScript

    シンプルなコンテキストメニューを実装できる「justContext.js」

    justContext.jsはjQueryなどを必要とせずに(ピュア …

最近の記事

  1. 梅
  2. CAR-HLD12BK
  3. OWL-LPB6701LA

アーカイブ

PAGE TOP