Pinterest風グリッドレイアウトをmasonry.jsで作る方法

Pinterest風のグリッドレイアウトは、特にビジュアルコンテンツを
魅力的に表示するために非常に人気があります。
このレイアウトは、異なる高さの要素が隙間なく配置されるため、非常に美しく見えます。
ここでは、masonry.jsを使用してPinterest風のグリッドレイアウトを
作成する方法について詳しく説明します。

Masonry.jsとは?

Masonry.jsは、JavaScriptライブラリで、ウェブページ上のアイテムを最適に配置するためのツールです。
このライブラリを使用すると、異なる高さのアイテムを隙間なくグリッドに配置することができます。Masonry.jsは、Pinterestのレイアウトにインスパイアされており、
そのため「Pinterest風レイアウト」を簡単に実現できます。

基本的なセットアップ

必要なファイルの準備

まず、Masonry.jsのライブラリをプロジェクトに追加する必要があります。
Masonry.jsはCDN経由で利用することも、ローカルにダウンロードして使用することもできます。
ここでは、CDNを使用した方法を紹介します。

HTMLファイルの<head>セクションに以下のコードを追加します。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pinterest風グリッドレイアウト</title>
<link rel="stylesheet" href="styles.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/4.2.2/masonry.pkgd.min.js"></script>
</head>
<body>
<!-- コンテンツはここに追加 -->
</body>
</html>

HTML構造の作成

次に、Masonryレイアウトを適用するためのHTML構造を作成します。
ここでは、.gridクラスを持つコンテナと、各アイテムに.grid-itemクラスを使用します。

<div class="grid">
<div class="grid-item">アイテム 1</div>
<div class="grid-item">アイテム 2</div>
<div class="grid-item">アイテム 3</div>
<!-- 追加のアイテム -->
</div>

CSSのスタイル設定

次に、基本的なスタイルを設定します。
ここでは、styles.cssファイルを使用してスタイルを定義します。

/* styles.css */
body {
font-family: Arial, sans-serif;
}

.grid {
display: flex;
width: 100%;
margin: 0 auto;
}

.grid-item {
background-color: #eee;
margin: 10px;
padding: 20px;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
transition: transform 0.2s ease;
}

.grid-item:hover {
transform: scale(1.05);
}

Masonry.jsの初期化

HTMLとCSSの準備が整ったら、JavaScriptを使ってMasonryを初期化します。
$(document).ready関数を使用して、ページが読み込まれた後にMasonryを設定します。

<script>
$(document).ready(function() {
$('.grid').masonry({
itemSelector: '.grid-item',
columnWidth: '.grid-item',
percentPosition: true
});
});
</script>

追加機能の実装

画像のレイジーロード

大量の画像を使用する場合、レイジーロードを実装することでページの読み込み速度を改善できます。
レイジーロードは、ユーザーがスクロールするまで画像を読み込まないようにする技術です。
ここでは、lazysizesライブラリを使用して画像のレイジーロードを実装します。

まず、lazysizesをHTMLファイルに追加します。

<script src="https://cdnjs.cloudflare.com/ajax/libs/lazysizes/5.2.2/lazysizes.min.js" async></script>

次に、HTMLの画像タグを以下のように変更します。

<div class="grid">
<div class="grid-item">
<img data-src="path/to/image1.jpg" class="lazyload" alt="Image 1">
</div>
<div class="grid-item">
<img data-src="path/to/image2.jpg" class="lazyload" alt="Image 2">
</div>
<!-- 追加のアイテム -->
</div>

フィルタリング機能

グリッドアイテムをカテゴリ別にフィルタリングする機能を追加することも可能です。
ここでは、アイテムをカテゴリ別に表示・非表示するためのフィルタリング機能を実装します。

まず、フィルタリングボタンをHTMLに追加します。

<div class="filters">
<button data-filter="*">全て</button>
<button data-filter=".category1">カテゴリ 1</button>
<button data-filter=".category2">カテゴリ 2</button>
</div>

次に、各アイテムにカテゴリクラスを追加します。

<div class="grid">
<div class="grid-item category1">アイテム 1</div>
<div class="grid-item category2">アイテム 2</div>
<div class="grid-item category1">アイテム 3</div>
<!-- 追加のアイテム -->
</div>

JavaScriptでフィルタリング機能を実装します。

<script>
$(document).ready(function() {
var $grid = $('.grid').masonry({
itemSelector: '.grid-item',
columnWidth: '.grid-item',
percentPosition: true
});

$('.filters button').on('click', function() {
var filterValue = $(this).attr('data-filter');
$grid.isotope({ filter: filterValue });
});
});
</script>

レスポンシブデザインの実装

レスポンシブデザインを実装することで、さまざまなデバイスでの表示を最適化できます。
以下のように、CSSメディアクエリを使用して、グリッドレイアウトを調整します。

/* styles.css */
.grid-item {
width: 100%;
}

@media (min-width: 600px) {
.grid-item {
width: 48%;
}
}

@media (min-width: 900px) {
.grid-item {
width: 30%;
}
}

まとめ

Pinterest風のグリッドレイアウトをmasonry.jsを使用して作成する方法について詳しく説明しました。
このレイアウトは、特にビジュアルコンテンツを魅力的に表示するために非常に有効です。
masonry.jsを使用することで、簡単に美しいグリッドレイアウトを実現できます。
さらに、レイジーロードやフィルタリング機能を追加することで、
ユーザーエクスペリエンスを向上させることができます。

このガイドが、あなたのプロジェクトに役立つことを願っています。
さらに詳しい情報が必要な場合や、カスタマイズが必要な場合は、
masonry.jsの公式ドキュメントを参照してください。