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. VintageTxt

    JavaScript

    タイピングしているような効果を実装できるjQueryプラグイン「VintageTxt」

    VintageTxtというjQueryプラグインを使えば、文字をタイピ…

  2. awNotices

    JavaScript

    スタート・ストップ機能がついたシンプルなjQueryニュースティッカー「awNotices」

    awNoticesはスタート・ストップ機能がついたシンプルに切り替わる…

  3. Sticky Multi Header Scroll
  4. curtains.js

    JavaScript

    カーテンがヒラヒラ動くようなテクスチャ面を実装できる「curtains.js」

    curtains.jsはカーテンがヒラヒラと波打つ動きのようなテクスチ…

  5. jquery.enhsplitter

    JavaScript

    コンテンツを分離できるフレーム実装「jquery.enhsplitter」

    jquery.enhsplitterはコンテンツを分離させるフレームを…

  6. Scroll To Top Then Fixed Navigation Effect With jQuery and CSS

最近の記事

  1. iPhone 11 ProとApple Watch Hermès
  2. cheero Energy Plus mini Wireless 4400mAh
  3. cheero 2 port PD Charger
  4. 台座と紅葉
  5. ニルヴァーナ バターチキンカレー

アーカイブ

PAGE TOP