Masonryプラグイン」の使い方を紹介します。Masonryブラウザの幅に応じてカラムレイアウトをある程度調節してくれるので、レスポンシブデザインウェブ制作にも使えそうです(これだけでは厳しいですが)。このエントリーは「なんだこれ!!「NHKスタジオパーク」のレスポンシブ・ウェブデザインが凄まじくレスポンシブ!!」の便乗記事です。Masonryを利用するための5つのポイント」も是非ご覧ください。1.サンプル配布サイトのトップページでも確認できますが、より簡単なサンプルを作ってみましたのでお試しください。jquery.masonry.min.js」を右クリックして「名前をつけてリンク先を保存」をクリック(Firefoxの場合)。ファイル名を「jquery.masonry.min.js」で保存します。簡単なサンプルとして、次のHTMLとCSSを用意します。class="item">ccc</div></div>次に、head要素に下記のscript要素を記述します。jquery.masonry.min.jsのパスは適宜設定してください。Masonryプラグインを実行したい一番外側の要素を指定します。Masonryが適用されます。この設定だけではfloatの設定でレイアウトを変更しているように見えますが、プラグインで動作しています。Masonryにはいくつかのオプションが用意されています。animationOptions:アニメーションの設定が行えます。}});columnWidth:カラム幅を設定できます。次のように設定すれば自動的にブラウザ幅にあわせて4カラムレイアウトに調整してくれます。}});containerStyle:masonryで指定した要素に、任意のスタイルをCSS形式で設定できます。}});gutterWidth:カラム間の幅を数値で指定します。30});isAnimated:アニメーションの有効・無効を設定します。animationOptionsを利用する場合は「true」を設定しないと動作しないようです。}});isFitWidth:カラムレイアウト全体をセンタリングしたい場合に「true」を設定します。true});isResizable:リサイズをトリガにしてプラグインを起動します。デフォルトは「true」です。true});isRTL:右から左方向にテキストを流し込みたい場合(right-to-left)に「true」を設定します。true});itemSelector:対象にするセレクタを指定します。指定しない場合、すべての要素が対象になってしまうようです。transitionsを利用した次の設定を行います。class属性値「masonry」は、「id="container"」を設定した要素に、プラグインで自動的に設定されます。Masonryを利用するための5つのポイント」で別途紹介しています。2012.10.20記事を一部修正しました。*必須(非表示)URL(U):情報を保存する?コメントへの返信ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。すべてのご質問にはお答えできない可能性があります。Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り(プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り)、ブラウザをリロードして投稿コメントが反映されていることを確認してください。コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「&lt;」、「>」は「&gt;」と入力してください。