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

関連記事

  1. Ideal Image Slider

    JavaScript

    シンプルで動きが滑らかなスライダー「Ideal Image Slider」

    Ideal Image Sliderはレスポンシブに対応したシンプルで…

  2. JavaScript

    リスト化したテキストを円になるように配置してくれるjQueryプラグイン「Extremes」

    ちょっと面白そうだったので使ってみました。リスト化した各テキストを円を…

  3. jQuery Notebook
  4. Responsive Sidebar Navigation
  5. quick-select

    JavaScript

    素早く簡単に選択できるセレクトボックス「quick-select」

    quick-selectは素早く簡単に選択可能なセレクトボックスを実装…

  6. Naver

    JavaScript

    シンプルですごくいい!レスポンシブに合うナビゲーションのjQueryプラグイン「Naver」

    NaverというjQueryプラグインがすごくシンプルでよかったのでご…

最近の記事

  1. 久保田城
  2. ハードサイド CS80
  3. ACC-TRBX
  4. ピスタチオ クリスマス ツリー フラペチーノ

Instagram始めました

Facebookページ

PAGE TOP