Masonryの使い方：サイズの異なるBOXをタイル状に整列

複数のボックスをタイル状(レンガ状)に並べるレイアウトを作る際に便利

大きさの異なるブロックを、タイル状(レンガ状)に隙間なく綺麗に並べてレイアウトしたいと思ったことはありませんか？

複数の細かな情報を1つ1つ小さなボックスにまとめて並べたり、写真にキャプションを加えてたくさん並べたり、複数の項目をタイル状(レンガ状)に並べるレイアウトを使うと見やすくなる場面はたくさんあります。Windows8やWindows10のスタート画面もそのようなレイアウトですね。

■普通のグリッドレイアウトでは、無駄な空間ができやすい
このようなレイアウトを作る方法の1つには、グリッドレイアウトを簡単に作成できるフレームワークを活用する方法もあります。例えば、記事「Bootstrap3でスマホ対応グリッドレイアウトを簡単作成」や「レスポンシブ対応グリッドレイアウトだけを使う方法」などで解説したフレームワークがあります。

しかし、ただグリッドに合わせて配置するだけでは、大きさの異なるボックスを並べて配置した際に何もない無駄な隙間ができてしまう問題点があります。

大きさが様々でも自動で隙間なく整列してくれるスクリプト「Masonry」

そこで便利なのが、大きさの異なる複数のブロックを隙間なくタイル状(レンガ状)に自動で整列してくれる「Masonry」というスクリプトです。この「Masonry」を使うと、右図のように複数のブロックを、できるだけ隙間がなくなるように配置してくれます。

単にグリッドに合わせて配置できるのではなく、隙間をできるだけ作らないように配置してくれる点と、閲覧者のウインドウサイズに合わせて配置してくれる点がとても便利です。レスポンシブ・ウェブデザインにも活用できるでしょう。

■動的に隙間なく再配置してくれる
閲覧者がウインドウサイズを変更すれば、その都度アニメーション効果と共に自動的に再配置される面白い機能も用意されています。標準では左寄せで整列しますが、右寄せ・中央寄せ・下寄せなども指定できます。そのほかにも豊富なオプションが用意されており、望みの形態で自動配置ができます。

右図のサンプルページを実際にお使いのブラウザで表示してみたい場合は、Masonryでの自動整列サンプルページをご覧下さい。

Masonryを使って、複数のブロックを隙間なく配置する方法

今回は、 この「Masonry」の使い方をご紹介いたします。複数の小さなボックスをたくさん掲載するレイアウトを使うウェブページで、ぜひ活用してみて下さい。

■jQueryは不要。単独で動作するように
以前の「Masonry」は、「jQuery Masonry」という名称のjQueryプラグインとして公開されていました。しかし、現在公開されているバージョンではjQueryは不要であり、単独で動作します。それに伴って必要な記述量は短く簡単になりました。本記事では、その簡単になった使い方を解説しています。

■CDN経由で読み込めば、自サイトへの設置作業も不要
この「Masonry」の新しいバージョンは、CDNサーバ経由で読み込めるようになりました。従来のように、わざわざファイルをダウンロードして自サイト上にアップロードする必要はありません。CDNサーバから直接ファイルを読み込むことで、手軽に使えるようになりました。

それでは、次のページから「Masonry」の設置方法と記述方法を見ていきましょう。