Web技術系中心に割と何でも更新中

JavaScriptライブラリ「Masonry」の使い方【ギャラリーページにおすすめ】

Programming Web

Web制作者

Web制作者
「画像を使ったギャラリーページを作りたい」
「ギャラリーページを簡単に作る方法を知りたい」

こういった要望にお応えします。

本記事の内容

  • ギャラリーページを作れる「Masonry」の導入手順

こんにちは、mineです。
Web制作歴は7年になります。

画像が並んでいるギャラリーページを作りたい場合ってありますよね。
普通にギャラリページを作ろう思うと、画像サイズがバラバラだとうまく整列できません。
floatとかinline-block使うと、思ったように整列できない)

この記事では、ギャラリーページに使えそうなJavaScriptライブラリ「Masonry」の導入手順をご紹介します。

Masonryとは?

Masonryは「石積み」という意味で、グリッドレイアウトを実装するためのJavaScriptライブラリです。異なる大きさの要素を最適な位置に配置することができます。

「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を実装する方法

おすすめ記事 【体験談】弁護士の退職代行で有給30日分を取得した話

おすすめ記事 「知らないから落ちる面接の4点減点法」で面接に挑んだ結果