JavaScriptライブラリ「Masonry」の使い方【ギャラリーページにおすすめ】
この記事の概要
Web制作者
画像を使ったギャラリーページを作りたい。ギャラリーページを簡単に作る方法を知りたい
管理人
あるJavaScriptライブラリを使うことで、簡単にギャラリーページを作ることができます！
詳しく紹介しますね。
本記事の内容
- ギャラリーページを作れる「Masonry」の導入手順
画像が並んでいるギャラリーページを作りたい場合ってありますよね。
普通にギャラリページを作ろう思うと、画像サイズがバラバラだとうまく整列できません。
（floatとかinline-block使うと、思ったように整列できない）
この記事では、ギャラリーページに使えそうなJavaScriptライブラリ「Masonry」の導入手順をご紹介します。
Masonryとは？
「Masonry」の導入手順
ここから、Masonryの導入手順についてご紹介します。
イメージ
大きさの異なる画像を、Masonryを使用して、画像間に隙間を入れたレンガのような配置になるように実装しています。
CDNでライブラリを読み込み
CDN
<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>jsファイルをダウンロードして、サーバーにアップロードしても良いのですが、CDNを使用すれば<head>タグに記述するだけで使用できるようになるので今回はCDNを利用します。
公式サイトにもCDNの説明があるので、確認してください。
Masonry
HTML
<div class="grid">
<div class="grid-item"><img src="(image_filepath)/sample01.jpg" /></div>
<div class="grid-item"><img src="(image_filepath)/sample02.jpg" /></div>
<div class="grid-item"><img src="(image_filepath)/sample03.jpg" /></div>
<div class="grid-item"><img src="(image_filepath)/sample04.jpg" /></div>
<div class="grid-item"><img src="(image_filepath)/sample05.jpg" /></div>
<div class="grid-item"><img src="(image_filepath)/sample06.jpg" /></div>
<div class="grid-item"><img src="(image_filepath)/sample07.jpg" /></div>
</div>grid（親クラス）、grid-item（子クラス）を設定してgrid-item要素の中に<img>タグを配置します。
サイズの異なる画像をランダムに並べます（image_filepathは任意の場所）。
CSS
* {
box-sizing: border-box;
}
.grid-item {
width: 33.3%;
padding: 10px;
}
.grid-item img {
display: block;
width: 100%
}今回は、非常にシンプルに画像を3列表示で画像間に隙間を作るようにCSSを指定しました。レスポンシブ対応として、幅を%指定にしています。
JavaScript（jQuery）
<script type='text/javascript' src='//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js?ver=1.11.3'></script>jQueryを<head>内に記述します。
$('.grid').masonry({
// options
itemSelector: '.grid-item',
columnWidth: '.grid-item',
horizontalOrder: true
});「Masonry」にはオプションが用意されており、オプションを設定により、グリッドレイアウトの種類を変更することが可能です。
オプションの中でも、columnWidthと、itemSelectorは設定するように公式で推奨されています。
itemSelectorでどの要素を対象にするかを指定します。
columnWidthでどの要素の幅に合わせるかを指定します（CSSで幅指定しておけばjsに記述しなくてもOK）。
horizontalOrderで要素を並べる順序を指定します。
他にも多くのオプションの指定方法や、細かいjsの記述方法などがあるのですが（下記URL参照）、今回は最低限のオプションだけ記述しました。
Masonry ・ Options
まとめ
非常に簡単に利用可能なので、10分くらいでグリッドレイアウトが実装できる便利なライブラリです。
ポイント
- jQueryを読み込み
- 「Masonry」を利用するCDN読み込み
- 画像（imgタグ）を並べて、CSSで何列にするか指定する
- jQueryで「Masonry」動作させるコードを記述する
今回紹介したようなフォトギャラリーページでも、ブログなどの記事一覧などにも使えるので、少しサイトをおしゃれにしたいなと思った方はぜひ使ってみてください。
別の記事で、ギャラリーページで使えそうなjQueryプラグイン「Colorbox」を扱っていますのでこちらもおすすめです。
Colorboxでlightboxを実装する方法
【簡単軽量】Colorboxでlightboxを実装する方法【jQuery】
簡単にlightboxを実装できるおすすめjQueryプラグイン「Colorbox」の導入手順をご紹介します。ギャラリーページなどの実装に使えるプラグインです。