※ 当サイトの記事には、広告を含む場合があります。
web制作を行う上で、グリッドレイアウトを作ることがあります。
グリッドレイアウトとは、コンテンツを格子状に並べるレイアウトのことです。
単に格子状に並べるだけであれば、特に苦労することはありません。しかし、下記の条件を満たすレイアウトを自作するのは、少々面倒です。
- バラバラの大きさの要素を、隙間なく配置させる
- コンテンツサイズに依存せずにレスポンシブ対応
そこで今回は、簡単にレスポンシブ対応のグリッドレイアウトを実装できるJavaScriptのライブラリ、Masonryを紹介します。Pinterest風グリッドレイアウトが作れます。
JavaScriptの基礎学習がまだの方は、下記の記事も参考にしてみてください。
【無料あり】JavaScriptの勉強ができるおすすめの本やサイト紹介!私たちが運営しているHello Mentorでは、あなただけのロードマップを組んで**、迷いなく学習**できるようにサポートしています。
JavaScriptはもちろん、web制作やフロントエンド(React / Next.js)も教えることができます。
- SNS等で情報が多すぎて何が本当かわからない...
- 勉強方法が合っているか不安...
- 目指す方向性があっているのか不安...
- 検索しても解決しない問題が多い...
このような方は、ぜひ下記のリンクからサービス詳細をご覧ください。
Hello Mentor\ 公式LINE始めました /
👇 友達登録でプレゼント 👇
自称日本一詳しいweb制作ロードマップ解説動画
※ 他にも無料学習相談や
学習に役立つ情報など特典あり
この記事の目次
Masonryとは
Masonryとは、レスポンシブ対応のグリッドレイアウトを簡単に実装できるJavaScriptライブラリです。
ギャラリーサイトやコーポレートサイトの制作実績などで、使用されているコンテンツを格子状に並べるレイアウトです。
Pinterestを想像するとわかりやすいかもしれません。
Masonryはファルサイズも軽量で、パフォーマンスの観点からも優秀なライブラリです。
Masonryの使い方
- Masonryのファイルを読み込む
- HTMLを記述する
- CSSを記述する
- 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関数を実行できます。
Hello Mentor\ 公式LINE始めました /
👇 友達登録でプレゼント 👇
自称日本一詳しいweb制作ロードマップ解説動画
※ 他にも無料学習相談や
学習に役立つ情報など特典あり
Masonryのオプションや機能を詳しく見てみよう!
Masonryでは、オプションを指定することで、様々なレイアウトの実装が可能です。より実用性のある、頻出レイアウトのみ紹介していきたいと思います。
オプション一覧
オプション名 | オプション内容 | デフォルト値 |
---|---|---|
itemSelector | コンテンツ要素を指定(設定奨) | コンテナの子要素 |
columnWidth | グリッドの1列分の幅(設定推奨) | 最初のグリッドのouterWidth |
gutter | コンテンツ間の水平方向のマージンを設定 | 0 |
horizontalOrder | コンテンツの並び順を左から右に維持 | false |
percentPosition | コンテンツ幅を%指定にするかどうか | false |
stamp | 指定した要素を避けて配置 | なし |
fitWidth | コンテナ幅をコンテンツ幅に合わせて調整するかどうか / trueにした場合、中央揃えとなる | false |
originLeft | コンテンツの水平方向の並び順を左から右にするかどうか / true:左から右 / false:右から左 | true |
originTop | コンテンツのを垂直方向の並び順を上から下にするかどうか / true:上から下 / false:下から上 | true |
containerStyle | コンテナに適用するスタイル | position: relative |
transitionDuration | グリッド配置時のアニメーション時間 | 0.4s |
resize | ウィンドウリサイズ時に並び替えをするかどうか | true |
initLayout | 初期化時にレイアウトを有効にするかどうか | true |
gutterとfitWidthだけ簡単に解説します。
💡 gutter
gutterは、コンテンツ間の水平方向のマージンを指定するオプションです。垂直方向のマージンを指定するオプションは用意されていないため、CSSのmarginを使用して設定します。
💡 fitWidth
fitWidthは、コンテンツまたはcolumnWidthが固定幅(px指定)の場合にのみ機能します。%には対応していません。また、fitWidthを使用しセンタリングを行う際は、「fitWidth: true」と設定した後に、CSS 側で「margin: 0 auto」を指定する必要があります。
メソッド一覧
メソッド名 | メソッド内容 |
---|---|
layout | コンテンツの再配置 / コンテンツサイズの変更や追加・削除が行われた際に使用 |
stamp | 指定した要素を避けてコンテンツを配置 |
unstamp | stamp解除 |
appended | コンテンツを末尾に追加 |
prepended | コンテンツを先頭に追加 |
addItems | コンテンツをMasonryインスタンスに追加 / この際、DOMへの追加なし |
remove | MasonryインスタンスとDOMからコンテンツを削除 |
on | Masonryイベントを追加 |
off | Masonryイベントを削除 |
once | 一度のみ実行されるMasonryイベントを追加 |
destroy | グリッド配置を破棄 |
getItemElements | インスタンスを配列として返す |
jQuery.fn.data(‘masonry’) | jQueryオブジェクトからMasonryインスタンスを取得 |
Masonry.data | 指定要素を介してMasonryインスタンスを取得 |
イベント一覧
イベント名 | イベント内容 |
---|---|
layoutComplete | グリッド配置後に発火 |
removeComplete | コンテンツ削除後に発火 |
詳細解説は公式サイトをご覧ください。
画面幅を指定して特定の状況下では無効にする
- 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」というライブラリを紹介しました。
【超簡単】JavaScriptライブラリaos.jsの使い方を解説!「Masonry」と「AOS」は相性が悪く、実装に手間がかかってしまいます。従って、今回はMasonryとの相性が良い、animete.cssとwow.jsを使用して実装しています。
また、スクロール連動型アニメーションは自作も簡単なので、自作しても良いと思います。
JavaScript(jQuery)でスクロールアニメーションを自作する方法を解説!まとめ
今回は簡単にグリッドレイアウトを実装できるJavaScriptライブラリ、Masonryを紹介しました。Masonryを使用することで、効率よくグリッドレイアウトを実装できるので、ぜひ使ってみてください。
また、オプション等を使用しての、複雑なグリッドレイアウトの実装を必要としない場合は、MiniMasonry.jsを使うと良いです。Masonryの簡易バージョンであり、jQueryに依存せず、JavaScriptのみでの実装が可能です。
Masonry以外にも簡単に導入できるアニメーション系のライブラリを紹介しているので、そちらも参考にしてみてください。
【超簡単】JavaScriptライブラリaos.jsの使い方を解説! JavaScriptライブラリRellax.jsの使い方を解説!簡単にパララックスを実装しよう! Block Reveal Effectsの使い方を紹介!2段階アニメーションを実装しよう!正しい方法・正しい手順でプログラミング学習しませんか?
私たちが運営しているHello Mentorは、独学で学習している方の下記の問題を解決するサービスです。
- 最適な学習計画が立てられない
- 正しい教材の選定ができない
- 間違った方向に進んでいる可能性がある
- 必須スキルの欠落に気づかない
- 30分以上悩むのは時間の無駄
メンター全員が今も現役のエンジニアです。独学の非効率さを解消して、最短でゴールを目指せる計画と学習サポートをします。
プログラミングは独学可能ですが、プロのサポートがあれば、効率的かつ安心して学習ができます。
厳しい時代も生き残れるエンジニアになりたい方は、まずは無料相談にお越しください。(強引な営業等、一切ありません!)
Hello Mentor\ 公式LINE始めました /
👇 友達登録でプレゼント 👇
自称日本一詳しいweb制作ロードマップ解説動画
※ 他にも無料学習相談や
学習に役立つ情報など特典あり
web制作ロードマップ解説動画プレゼント👉
LINE登録でGET
メンティーさんからは、『圧倒的に効率化できている!』と嬉しい声をいただいています。