画像レイアウト関連で便利なjQueryプラグイン等まとめ
2012年07月30日-![はてなブックマーク](http://b.hatena.ne.jp/entry/image///phpspot.org/blog/archives/2012/07/jquery_103.html)
スポンサード リンク
ちょっと画像レイアウト関連で便利なjQueryプラグインを調査仕事でまとめていたのでついでにご紹介。
この手のプラグインはjQuery Masonryが最初だったかと思いますが、色々と出てきたのでここら辺で全部しっておくとよいかも。
Wookmark
比較的新しめのPinterest風レイアウトを作る際に便利なプラグイン。
![](http://phpspot.net/php/webimager/admin3/data/6afa8c06ae487ea2dc8463b692fc0747.png)
jQuery isotope
レイアウトだけではなくダイナミックに要素をアニメーションさせることも出来るプラグイン
![](http://phpspot.net/php/webimager/admin3/data/8a3a299d9ced7abdff335392006213a9.png)
異なる幅・高さの画像も超綺麗に整列させるjQueryプラグイン「Atteeeeention plugin」
Google画像検索みたいに画像を綺麗にならべられます
![](http://phpspot.net/php/webimager/admin3/data/3bc96ebba94c61b64e73f1384f1555c6.png)
↓↓↓↓
![](http://phpspot.net/php/webimager/admin3/data/b5fb1da69944157ead359f1ec668e16e.png)
ボックス要素をレンガ状に綺麗に整列させる「jQuery Masonry」が凄い
要素の整列系の初期のプラグイン。最初に見た時はあっと驚いたものです
![](http://phpspot.net/php/webimager/admin3/data/98a1e7a916eecfe29994347a4d92c3d6.png)
↓↓↓↓
![](http://phpspot.net/php/webimager/admin3/data/ea04fd803c258b282ac2835e64e8c586.png)
並べた画像を敷き詰めて超カッコよくするjQueryサンプル
画像のクールなギャラリー。完成したサンプルプログラムとして活用できます
![](http://phpspot.net/php/webimager/admin3/data/e2a2b57b6ce77e315de3246e1b854245.png)
EqualBox
異なる高さのDIVを揃えるプラグイン。画像以外にも使えます
![](http://phpspot.net/php/webimager/admin3/data/1eb23881db8308f49af144bb0d1428c6.png)
↓↓↓↓
この手のプラグインはjQuery Masonryが最初だったかと思いますが、色々と出てきたのでここら辺で全部しっておくとよいかも。
比較的新しめのPinterest風レイアウトを作る際に便利なプラグイン。
![](http://phpspot.net/php/webimager/admin3/data/6afa8c06ae487ea2dc8463b692fc0747.png)
jQuery isotope
レイアウトだけではなくダイナミックに要素をアニメーションさせることも出来るプラグイン
![](http://phpspot.net/php/webimager/admin3/data/8a3a299d9ced7abdff335392006213a9.png)
異なる幅・高さの画像も超綺麗に整列させるjQueryプラグイン「Atteeeeention plugin」
Google画像検索みたいに画像を綺麗にならべられます
![](http://phpspot.net/php/webimager/admin3/data/3bc96ebba94c61b64e73f1384f1555c6.png)
↓↓↓↓
![](http://phpspot.net/php/webimager/admin3/data/b5fb1da69944157ead359f1ec668e16e.png)
ボックス要素をレンガ状に綺麗に整列させる「jQuery Masonry」が凄い
要素の整列系の初期のプラグイン。最初に見た時はあっと驚いたものです
![](http://phpspot.net/php/webimager/admin3/data/98a1e7a916eecfe29994347a4d92c3d6.png)
↓↓↓↓
![](http://phpspot.net/php/webimager/admin3/data/ea04fd803c258b282ac2835e64e8c586.png)
並べた画像を敷き詰めて超カッコよくするjQueryサンプル
画像のクールなギャラリー。完成したサンプルプログラムとして活用できます
![](http://phpspot.net/php/webimager/admin3/data/e2a2b57b6ce77e315de3246e1b854245.png)
EqualBox
異なる高さのDIVを揃えるプラグイン。画像以外にも使えます
![](http://phpspot.net/php/webimager/admin3/data/1eb23881db8308f49af144bb0d1428c6.png)
↓↓↓↓
![](http://phpspot.net/php/webimager/admin3/data/499be07b1acea9c471e4a1ea900b1b7c.png)
おまけ
紙のノートっぽいWEBデザインでコンテンツを綺麗にラインに合わせられる「Baseline.js」
画像は関係ないようで、背景の画像と文字を合わせられるプラグインです
↓↓↓↓
一昔前はちょっとむずかしいと思われていたレイアウトもこうしたプラグインで簡単に実現できるようになって素晴らしい限りですね
スポンサード リンク
Advertisements
SITE PROFILE
最新のブログ記事(新着順)
- TailwindCSSなサイトで使える100以上のアニメーションエフェクト「animata」
- SVG形式のテック系企業のロゴを簡単にゲットできる「Svgl」
- 統一感のある色味を一括生成できるツール「The good colors」
- くちばしフォント【商用可】
- 小説表紙などに使えそうな商用可なフォント「になロマン」
- 筆で書いたようなカナ書体「筆竹仮名B」
- 無料・商用利用可な丸文字ピクセルフォント「マルミーニャM」
- スペースコブラ風フォント
- Next.jsのVercelから商用利用可能なフリー汎用フォント「Geist Font 」
- 無料で使えるいい感じの日本語フォント「しっぽり太ゴシック」
- 過去のエントリ