グリッドレイアウトでのWebサイト構築に役立つjQueryプラグイン「BlocksIt.js」「Isotope」「jQuery Masonry」｜BLACKFLAG
最近のレスポンシブWebデザインの影響もあって ボックスをタイル状に並べた構成のグリッドレイアウトWebサイトをよく見かけます。 ウィンドウサイズによって最適な配置で画面を構成できたりするグリッドレイアウトですが jQueryを使って簡単に実装することができるプラグインを自分用メモとして紹介してみます。 まずは「BlocksIt.js」 BlocksIt.js | Dynamic Grid Layout jQuery Plugin – Plugin Page デモページはこちら BlocksIt.js Demonstration #1 – Random Dynamic Grid Layout BlocksIt.js Demonstration #2 – Pinterest Dynamic Grid Layout with CSS3 Transitions ページをロードするたびにランダムで
最近また増えてきた可変グリッドレイアウトのjQueryプラグインまとめ 2012年9月 | webrecuration:IT/Webデザイン系ブログ
可変グリッドレイアウトとは、ボックスをタイル状に並べるプラグイン…っておなじみですね。Pinterestやfacebookのタイムラインにも採用されています。基本的にこのレイアウトの実装はmasonry.js一強な感じだったのですが最近またあたらしく登場してきたのでご紹介。 Masonry.js まずは一番流行しているMasonryから。日本語の解説もいっぱいあるのでだいぶ安心です。 無限スクロールを実装するInfiniteScrollと組み合わせた例。 ボックス要素を綺麗に整列出来るjQueryプラグイン・jQuery MasonryにInfinite Scroll（無限スクロール）機能を加えたサンプル – かちびと.net WordPressのデフォルトテンプレートであるTwentyElevenに導入した例。WordPressではそのままだとうまくいかないようです。 WordP
可変グリッドレイアウトを実現するjQuery | 海外のホームページ作成＆進出支援の株式会社メディアウェイブ
デザイナーの植村です。 一昨年～去年あたり、可変グリッドレイアウトのWebデザインが 一世を風靡しました。 カードが並んでいるようなデザイン、と言えば分かりやすいと思います。 通常のWebサイトよりも、ブログなど記事を扱うWebサイトに取り入れやすく、 WordPressのテーマとしてもよく採用されています。 こちらはWordpressの「tanzaku」というテーマです。 無料で国産ということもあって、導入しているサイトも数多く見かけます。 まるで雑誌を読んでいるような感覚になる、親しみのあるデザインです。 他にもSTRAIGHTLINEさんのテーマが有名でしょうか。 上記のような無料のテーマを導入するのもいいですが、 jQueryプラグインを利用すれば簡単にテーマが作成できます。 今回、3つのjQueryを紹介させて頂きます。 1. jQuery Masonly 定番ですね。利用してい
かんたんに可変グリッドを実現できる「jQuery Masonry」 | PLUS
ウィンドウサイズに合わせてコンテンツが可変する可変グリッド。自分でつくろうとすると大変ですが、この機能をかんたんに組み込める「jQuery Masonry」というものがあります。オプションも必要最低限揃っていてカスタマイズもできちゃいます。 組み込み方法 1. jQuery Masonryをダウンロード サイトからjQuery Masonryをダウンロードします。 2. 組み込み jQuery本体ファイルと、jQuery Masonryをヘッダで読み込んだ後に下記コードを入れます。 $(function(){ $('#alphas').masonry({ itemSelector: '.box', columnWidth: 265, isAnimated: true }); }) #alphasの中に可変させたいコンテンツを格納します。itemSelectorは格納するBOXのクラスやI
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
