masonry.jsの使い方を解説！Pinterest風グリッドレイアウトを簡単実装！

web制作を行う上で、グリッドレイアウトを作ることがあります。

グリッドレイアウトとは、コンテンツを格子状に並べるレイアウトのことです。

• バラバラの大きさの要素を、隙間なく配置させる
• コンテンツサイズに依存せずにレスポンシブ対応

単に格子状に並べるだけであれば、特に苦労することはありません。しかし、上の条件を満たすレイアウトを自作するのは、少々面倒です。

そこで今回は、簡単にレスポンシブ対応のグリッドレイアウトを実装できるJavaScriptのライブラリ、Masonryを紹介します。Pinterest風グリッドレイアウトが作れます。

💡 コーディングの練習なら模写修行！

無料教材もあります！

【こんな方におすすめ】

• 実務のレベル感を知りたい
• プロの制作フローを学びたい
• 基礎学習中、もしくは終えたばかり
• CSS設計やSCSSを使った書き方を学びたい

公式サイトを見る

コーディング教材の【模写修行】は他の教材と何が違うのか？

Masonryとは

Masonryとは、レスポンシブ対応のグリッドレイアウトを簡単に実装できるJavaScriptライブラリです。

ギャラリーサイトやコーポレートサイトの制作実績などで、使用されているコンテンツを格子状に並べるレイアウトです。

Pinterestを想像するとわかりやすいかもしれません。

Masonryはファルサイズも軽量で、パフォーマンスの観点からも優秀なライブラリです。

Masonryの使い方

1. Masonryのファイルを読み込む
2. HTMLを記述する
3. CSSを記述する
4. JavaScriptを記述する

まずはこれらの順に、簡単に使い方を解説します。

解説では、以下のDEMO1を作成します。

Masonryのファイルを読み込む

初めに、HTML内で読み込む2つのJavaScriptファイルをダウンロードします。

💡 1つ目：Masonry

HTML内で読み込む、ファイルをダウンロードします。

ダウンロードは、 公式サイトの「Download these docs」から行います。

• masonry-docs > masonry.pkgd.min.js

こちらのファイルが、HTML内で読み込むファイルです。

<script src="js/masonry.pkgd.min.js"></script>

ご自身の環境に合わせパスを変更して読み込みます。

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

CDNを利用することもできます。バージョンが変わってる場合もあるので、ご自身で公式サイトも確認してみてください。

💡 2つ目：imagesLoaded

imagesLoadedは「指定した画像を全て読み込んだら、関数を実行する」処理を簡単に実装してくれるライブラリです。

ダウンロードは、 公式サイトの『Install → imagesloaded.pkgd.min.js minified』から行います。

<script src="js/masonry.pkgd.min.js"></script>
<script src="js/imagesloaded.pkgd.min.js"></script>

ご自身の環境に合わせパスを変更して読み込みます。

Githubからのダウンロードも可能です。

HTMLを記述する

<div class="wrap">
  <ul class="demo01 js-demo01">
    <li class="item js-item"><img src="img/sample1.jpg"></li>
    <li class="item js-item"><img src="img/sample2.jpg"></li>
    <li class="item js-item"><img src="img/sample3.jpg"></li>
    <li class="item js-item"><img src="img/sample4.jpg"></li>
    <li class="item js-item"><img src="img/sample5.jpg"></li>
    ・・・
  </ul>
</div>

HTMLはシンプルです。今回はリストを使用していますが、divでもなんでも構いません。

コンテナとなる要素ulとコンテンツ(アイテム)となる要素liにclassを指定してください。

CSSを記述する

.wrap {
  width: 90%;
  margin: 0 auto;
}

.demo01 {
  margin: 0 auto;
}

.item {
  width: 200px;
}

.item img {
  width: 100%;
}

widthなどは、ご自身のレイアウトに合わせ変更してください。

JavaScript を記述する

$(function () {
  var $demo1 = $('.js-demo01');   //コンテナとなる要素を指定

  $demo1.imagesLoaded(function(){ //imagesLoadedを使用し、画像が読み込みまれた段階でMasonryの関数を実行させる
    //Masonryの関数↓
    $demo1.masonry({              //オプション指定箇所
      itemSelector: '.js-item',   //コンテンツを指定
      columnWidth: 205,           //カラム幅を設定
      fitWidth: true,             //コンテンツ数に合わせ親の幅を自動調整
    });
  });
});

動作をさせるために必要なコードです。今回はjQueryを使っています。

前述した通り、imagesLoadedは、「指定した画像を全て読み込んだら、関数を実行する」処理を簡単に実装してくれるライブラリです。

上のように書くことで、.js-demo01内の全ての画像が読み込まれた段階でMasonry関数を実行できます。

Masonryのオプションや機能を詳しく見てみよう！

Masonryでは、オプションを指定することで、様々なレイアウトの実装が可能です。より実用性のある、頻出レイアウトのみ紹介していきたいと思います。

オプション一覧

gutterとfitWidthだけ簡単に解説します。

💡 gutter

gutterは、コンテンツ間の水平方向のマージンを指定するオプションです。垂直方向のマージンを指定するオプションは用意されていないため、CSSのmarginを使用して設定します。

💡 fitWidth

fitWidthは、コンテンツまたはcolumnWidthが固定幅(px指定)の場合にのみ機能します。%には対応していません。また、fitWidthを使用しセンタリングを行う際は、「fitWidth： true」と設定した後に、CSS 側で「margin: 0 auto」を指定する必要があります。

メソッド一覧

イベント一覧

詳細解説は公式サイトをご覧ください。

画面幅を指定して特定の状況下では無効にする

• SPのみ無効
• 〇〇px以下は無効

上のように画面幅を指定して、特定の状況下では無効にしたい場合が出てきます。

Masonryでは、デバイスを指定するオプションは用意されていません。自身でサイズを設定して、無効化する必要があります。今回の解説では、480pxより小さい場合は無効にします。

• 480px以下の場合、コンテンツ横幅100%
• 480px以上の場合、Masonryを有効

まずは、DEMO2をご覧ください。

HTML

<div class="wrap">
  <ul class="demo02 js-demo02">
    <li class="item js-item"><img src="img/sample1.jpg"></li>
    <li class="item js-item"><img src="img/sample2.jpg"></li>
    <li class="item js-item"><img src="img/sample3.jpg"></li>
    <li class="item js-item"><img src="img/sample4.jpg"></li>
    <li class="item js-item"><img src="img/sample5.jpg"></li>
    ・・・
  </ul>
</div>

HTMLに関しては、特別な記述はありません。

CSS

.wrap {
  width: 90%;
  margin: 0 auto;
}

.demo02 {
  margin: 0 auto;
}

.item {
  width: 100%;
}

.item img {
  width: 100%;
}

@media screen and (min-width: 480px) {
  .item {
    width: 200px;
  }
}

CSSに関しても、特別な記述はありません。

.itemに対して、480pxより小さい場合はwidth: 100%;、480px以上はwidth: 200px;を指定します。

JavaScript

$(function () {
  var sp = 480; //SPのサイズを設定

  function masonry_execute() {
    var $demo2 = $('.js-demo02');   //コンテナとなる要素を指定

    if ( $('html').width() < sp ) { //ウィンドウ幅が480px以下だった場合、masonry破棄 (無効)
      $demo2.masonry('destroy');
    } else {                        //ウィンドウ幅が480px以上だった場合、masonry適応
      $demo2.imagesLoaded(function(){
        $demo2.masonry({
          itemSelector: '.js-item',
          columnWidth: 205,
          fitWidth: true,
        });
      });
    }
  }
  masonry_execute(); //masonry_execute関数を実行

  $(window).resize(function(){ //ウィンドウがリサイズされたら、再度masonry_execute関数を実行
    masonry_execute();
  });
});

• 480pxより小さいの場合、destroyメソッドを使用してグリッド配置を破棄
• 480px以上の場合は、通常通りMasonryを適応

if文を使用し、「ウィンドウサイズが480pxより小さいかそうでないか」を判定しています。

ウィンドウがリサイズされたタイミングで再度、masonry_execute関数を実行しています。省略してしまうと正常に動作しないので、必ず記述しましょう。

スクロールに連動させてアニメーションする

今までのデモのように画像をあらかじめ表示しておくのではなく、スクロールに応じてフェードインで画像を表示するアニメーションです。

DEMO3をご覧ください。（PCで見たほうがわかりやすいです。）

今回は、animate.cssとwow.jsを組み合わせて実装しています。

以前、「スクロール連動型アニメーション」は「aos.js」というライブラリを紹介しました。

「Masonry」と「AOS」は相性が悪く、実装に手間がかかってしまいます。従って、今回はMasonryとの相性が良い、animete.cssとwow.jsを使用して実装しています。

また、スクロール連動型アニメーションは自作も簡単なので、自作しても良いと思います。

まとめ

今回は簡単にグリッドレイアウトを実装できるJavaScriptライブラリ、Masonryを紹介しました。Masonryを使用することで、効率よくグリッドレイアウトを実装できるので、ぜひ使ってみてください。

また、オプション等を使用しての、複雑なグリッドレイアウトの実装を必要としない場合は、MiniMasonry.jsを使うと良いです。Masonryの簡易バージョンであり、jQueryに依存せず、JavaScriptのみでの実装が可能です。

Masonry以外にも簡単に導入できるアニメーション系のライブラリを紹介しているので、そちらも参考にしてみてください。

超実務向け！コーディングの練習が出来るサービス作りました 🎉

模写修行は実戦に沿った形で、コーディングの"練習"ができるサービスです。

こんな方におすすめ！

• 実務のレベル感を知りたい
• プロの制作フローを学びたい
• 何を考えながらコードを書くのか知りたい
• 基礎学習中、もしくは終えたばかり
• CSS設計やSCSSを使った書き方を学びたい

模写修行ではデザインデータ(FigmaとXD) / web上で見れる解説 / サンプルコードを提供しています。ご自身でデザインを見ながらコーディングに挑戦し、解説とサンプルコードで答え合わせ&さらに深く学ぶことができるサービスです。

他の書籍や教材との違いは、超初心者向け・学習用の書き方ではなく、実際の現場で通用する書き方や考え方にフォーカスしている点です。詳しくは下記の記事をご覧ください。

コーディング教材の【模写修行】は他の教材と何が違うのか？

無料教材もあります！👍

模写修行を見る

脱初心者！自信を持ってプロと言えるスキルを！

嬉しい声もいただいています！

自分のweb制作におけるコードの書き方、ファイル管理は模写修行さんから学ばせていただきました。独学の強い味方だと思いました。教材、メディアありがとうございました！
TwitterでDMいただきました！🙇

---

classの命名迷子・横並びレイアウト恐怖症だったけど、無料〜中級までいくつかやっていく中で、どんどん迷いが減っていって楽しかったです！解説記事もわかりやすい...！
Tweet

---

デザインきれいだし、解説とサンプルソースが付いて答え合わせしやすいところが良い。
Tweet

---

答え合わせ終わった。top-kvの実装方法に脱帽。そういうやり方があることを知れたことが大きい。。sass学びはじめたばかりなのでscssコードがとても参考になった。次からはscssでかく。
Tweet

---

無料教材もあります！👍

模写修行を見る

脱初心者！自信を持ってプロと言えるスキルを！