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. gridstack.js

    JavaScript

    ウィジェットレイアウトを作成できるjQueryプラグイン「gridstack.js」

    gridstack.jsはドラッグ&ドロップでウィジェットレイアウトを…

  2. Horizon Swiper

    JavaScript

    スワイプやスクロール対応の軽量なjQueryプラグイン「Horizon Swiper」

    Horizon Swiperはスワイプやブラウザスクロールに対応したj…

  3. no-image

    JavaScript

    Lightboxスタイルのギャラリーやカルーセルを実装できる「slideBox.js」

    slideBox.jsはレスポンシブに対応したLightboxスタイル…

  4. popModal

    JavaScript

    6種類のモーダルウィンドウを実装できる「popModal」

    popModalは6種類のモーダルウィンドウを実装することができるjQ…

  5. waslidemenu
  6. jQuery touchSwipe Carousel

最近の記事

  1. そそそ 明太クリームそうめん
  2. すしざんまい
  3. 蒼龍唐玉堂 特製牛バラ担々麺
  4. サーモンアボカドサラダラップとドリップ
  5. 猿田彦フレンチ

アーカイブ

PAGE TOP