2/3 Masonryの使い方：サイズの異なるBOXをタイル状に整列 [ホームページ作成] All About

ボックスを隙間なく整列してくれる「Masonry」の使い方

それでは、できるだけ無駄な空間が出ないように隙間を詰めて複数のボックスを自動配置してくれるスクリプト「Masonry」の使い方をご紹介いたします。下記のStep.1～3の通りに記述してみて下さい。

0. 自サイトへの設置は不要

「Masonry」のスクリプト本体はCDNサーバ経由で読み込めますから、わざわざ自サイトに設置しておく必要はありません。スクリプトをダウンロードして自サイトにアップロードしておくような準備は一切不要です。 →Step.1へ

■自サイトに置きたければ置くことも可能：

右上の「Download masonry.pkgd.min.js」リンクからダウンロード

配布ページ右上の「Download masonry.pkgd.min.js」リンクからスクリプト本体をダウンロードすることもできる

とはいえ、自サイト上に設置して使いたければそうすることも可能です。「Masonry」の配布サイトへアクセスして、右図のように「Download masonry.pkgd.min.js」と書かれた赤紫色部分をクリックすると、スクリプトをダウンロードできます。

リンクを直接クリックすると、JavaScriptソースがそのまま表示されてしまいますので、右クリックして「名前を付けてリンク先を保存」等の機能を使って保存して下さい。ダウンロードしたファイルは、自サイト内の適当な場所にアップロードすれば良いでしょう。

1. HTMLに「Masonry」スクリプトを読み込む記述を追加

まずは対象のページで「Masonry」スクリプトを読み込みます。読み込みが必須のスクリプトは「Masonry」の本体JavaScriptファイル1つだけです。例えば、以下の1行をHTMLのhead要素内などに記述します。

<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>

上記はCDNサーバにある「masonry.pkgd.min.js」ファイルを読み込むための記述です。もし、スクリプト本体を自サイト上にアップロードしたのであれば、その場所から読み込んで下さい。

■仕様が変わり、jQueryは不要になりました
当初のバージョンでは、「Masonry」を使うためにはjQueryの併用が必須でした。しかし、現在ではjQueryは不要になっており、単独で動作します。現在の「Masonry」も従来と同じようにjQueryプラグインとして使うことも可能ですが、本記事では単独で使用する記述方法を解説しています。

2. 隙間なく整列させたいボックスを作るHTMLの書き方

次に、隙間なく整列させたいボックス群を作るHTMLソースを記述します。必要な記述は以下の2種類です。

■1. 外側のブロック

<div class="grid"
     data-masonry='{ "itemSelector": ".grid-item", "columnWidth": 150 }'>
　：　：　：　内側のボックス群　：　：　：
</div>

隙間なく整列させたいボックス群を囲む外側のブロックには、上記のようにclass名「grid」を加え、data-masonry属性値に初期設定やオプションを記述します。設定やオプションの書き方は後述しますので、まずは上記の通りに記述してみて下さい。なお、引用符には「'」と「"」の2種類が混在していますので、取り違えないよう注意して下さい。

■2. 自動で隙間なく配置したいボックス

<div class="grid-item">～中身～</div>
<div class="grid-item">～中身～</div>
　：　：　：
<div class="grid-item">～中身～</div>

隙間なく整列させたいボックスそのものには、class名「grid-item」を加えておきます。これらのボックスは何個あっても構いません。

■記述例
上記の1と2を合わせた記述例(隙間なく配置したいボックスが5つある場合)は下記の通りです。記事上では見づらい場合は、後述のサンプルページのHTMLソースをご覧下さい。

<div class="grid" data-masonry='{ "itemSelector": ".grid-item", "columnWidth": 150 }'>
   <div class="grid-item"><p class="image"><img src="photo1.jpg" width="120" height="96" alt="1-森林"></p><p class="caption">森林</p></div>
   <div class="grid-item"><p class="image"><img src="photo2.jpg" width="120" height="96" alt="2-新緑"></p><p class="caption">新緑</p></div>
   <div class="grid-item"><p class="image"><img src="photo3.jpg" width="120" height="96" alt="3-森林の花"></p><p class="caption">森林の花</p></div>
   <div class="grid-item"><p class="image"><img src="photo4.jpg" width="120" height="150" alt="4-空"></p><p class="caption">空</p></div>
   <div class="grid-item"><p class="image"><img src="photo5.jpg" width="120" height="96" alt="5-富良野"></p><p class="caption">富良野</p></div>
</div>

※ここでは外側のブロックにも内側のボックスにもdiv要素を使いましたが、他の要素を使うこともできます。記述方法は同じで、各要素に指定のclass名と属性を加えるだけです。

これだけの記述でも「Masonry」は動作する

以上が「Masonry」の基本的な使い方です。たったこれだけで、ウインドウサイズに合わせて複数のボックスを自動的にできるだけ隙間なく詰めて表示してくれます。

■「Masonry」を使ったサンプルページ

Masonryを使って複数のボックスを自動整列させるサンプルページ

上記に掲載したソースをベースにして「Masonry」で複数のボックスを自動整列させたサンプルページを用意しています。動作確認やソースのコピーなどのためにご参照下さい。
→ Masonryでの自動整列サンプル1

このサンプルページでは、ウインドウの横幅を変化させた際に、アニメーション効果と共に複数の「キャプション付き写真」が自動的に再配置されます。再配置のアニメーションがおもしろいので、ブラウザのウインドウサイズを様々に変化させて試してみて下さい。

さて、「Masonry」には自動整列方法に関する様々なオプションが用意されています。最後に、「Masonry」のオプション記述方法をご紹介いたします。