デザイン＆レイアウト 1-02
コンテンツを隙間なくパネル状に配置する

ウィンドウのサイズに応じてコンテンツを自動配置させるjQuery Masonryの使い方について説明する。動的に変更されるコンテンツは、ユーザの目を引くことができるだろう。

制作・文／山本圭助（株式会社ラナデザインアソシエイツ）

BROWSER Firefox…6over　Safari…5over　Chrome…15over

01

「Masonry」とはレンガや石細工の意味で、jQuery Masonryはレンガを積み上げるようにコンテンツを配置することができるプラグインで、並べるコンテンツのマージンやサイズなどの扱い方に慣れると、手軽にレスポンシブWebデザインにも対応ができるようになる。

ただしこのプラグインの目的は、コンテンツを隙間なく並べることにあるので、意図した順番通りに並べたい場合は、コンテンツの記述順などを工夫する必要がある。ウィンドウのサイズ変更時には自動的にコンテンツ配置を変更する【1-1】【1-2】。

【1-1】通常のfloat適用

【1-2】Masonry 適用

02

まずは、エリアとなるコンテナ要素と並べ替えられるブロック要素を作成する【2-1】。この時点ではブロックは縦に並んでいる【2-2】。

【2-1】

【2-2】サンプルでは図のようにブロックのサイズを指定している。

03

次に、HTML にscript 要素を追加する【3-1】。続いて、コンテナ要素（#container）にMasonry を適用する【3-2】。これだけで自動的にコンテンツが配置される。

アニメーションなどのオプション【3-3】を指定したい場合は引数で渡す。今回はウィンドウをリサイズした時などのコンテンツ再配置時にアニメーション効果を付加している【3-4】。

【3-1】

【3-2】

【3-3】

【3-4】ウィンドウをリサイズした時などのコンテンツ再配置時にアニメーション効果を付加する。

04

Chrome やSafari などは画像が読み込まれないとサイズが取得できない【4-1】。そのため、ブロック内に画像を使用する場合は、画像の読み込みを待つ処理が必要になる。

具体的には、コンテナ要素にimagesLoadedメソッドを実行し、そのコールバックファンクション内で、Masonryを実行させる【4-2】。

これにより、画像の読み込みをまってからレイアウトの変更が実行されるようになる。

【4-1】正しく配置されない例

【4-2】

05

レイアウト変更時のアニメーションにCSS3 を使用することもできる。

方法は、レイアウト変更されるブロックに自動で付加されるクラス.masonrybrickにスタイルを追加する【5-1】。

これで、isAnimatedオプションを指定しない、またはfalseを指定した場合でも、レイアウト変更時にブロックがアニメーションしながら動くようになる。

ブラウザによっては、JavaScriptを使った場合と比べ、CSS による動作の方がよりスムーズな動きが期待できる。

【5-1】各ブラウザ用のプレフィックスは省略している。

06

05のままではCSS transitionに非対応なブラウザの場合にアニメーションの動作がなくなってしまう。そこで非対応なブラウザではisAnimatedオプションをtrueにして、jQuery のanimateメソッドによるアニメーションを行うように設定する【6-1】。

CSS Transitionに対応している場合は、Modernizr.csstransitionsがtrueになり、対応していない場合はfalseになる。

非対応ブラウザではtrueになるように指定したいので、これを「! 演算子」で反転して使用する【6-2】。

続いて、HTMLにscript要素を追加する【6-3】。

これで完成だ【6-4】。

【6-1】ここではModernizr.js を使用して、CSS Transition に対応しているかどうかを判定する。

【6-2】
「! 演算子」は論理演算子の一つで、真偽値を否定演算する。
例）:b = !a
a がtrue の場合は、b はfalse。a がfalse の場合は、b はtrue。

【6-3】HTML の記述。

【6-4】完成例。

[目次に戻る]

【本記事について】
2013年1月29日発売のweb creators特別号「いますぐ悩みが解決する! Webデザイン仕事で役立つ54のアイデア」から、毎週記事をピックアップしてご紹介! 近年さかんに目にするパララックス効果やMasonryを利用したレイアウトをはじめ、見やすくて使いやすいナビゲーション、フォームや製品紹介ページのユーザビリティを向上するインタラクション、表現の可能性を広げるHTML5+CSS3の機能、制作効率を向上するフレームワークの紹介、スマートフォンサイト制作のポイントとTipsなど、Web制作の仕事に役立つ54のアイデアが満載です。

※本記事はweb creators特別号『新世代Web制作テクニック総特集』からの転載です。この記事は誌面でも読むことができます。