日本語

Bootstrap チュートリアル

Bootstrap レイアウト

Bootstrap コンテンツ

Bootstrap コンポーネント

Bootstrap フォーム

Bootstrapのヘルパー

Bootstrap ユーティリティ

Bootstrap デモ

Bootstrap - Masonry デモ

Bootstrap Masonry 介绍

こんにちは、Web開発者の卵さんたち！今日は、Bootstrap Masonryの興味深い世界に飛び込みます。あなたの近所の親切なコンピュータ教師として、この旅を案内するのを楽しみにしています。コードを書いたことがない人も心配しないでください – 我们はステップバイステップ進め、すぐにプロのように美しい、動的レイアウトを作成できるようになります！

Bootstrap-Masonry Demo

Bootstrap Masonryとは？

Bootstrap Masonryは、異なる高さの要素のグリッドを作成できる強力なレイアウト技術です。異なるサイズのレンガが完璧に組み合わさる壁を想像してみてください – それがMasonryの本質です！画像ギャラリー、ポートフォリオ、またはスペースを無駄にしたくないtidyで整理された外見が必要などのようなコンテンツでも特に役立ちます。

Bootstrap Masonryを始める

プロジェクトの設定

コードに飛び込む前に、プロジェクトを設定しましょう。BootstrapとMasonryライブラリをHTMLファイルに含める必要があります。最初は混乱するかもしれませんが、それぞれの部分を説明します。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap Masonry デモ</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<!-- 我们的内容ここに -->

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/masonry.pkgd.min.js"></script>
</body>
</html>

これを分解しましょう：

  1. 我们は基本的なHTML構造から始めます。
  2. <head>内でBootstrapのCSSファイルにリンクします。
  3. <body>の最下部にBootstrapとMasonryのJavaScriptファイルを含めます。

これらのファイルは、Masonryレイアウトを作成するために必要なツールを提供します。

最初のMasonryレイアウトを作成する

さあ、いくつかのカラフルなボックスを使ってシンプルなMasonryレイアウトを作成しましょう。以下のコードを<body>タグ内に追加します：

<div class="container my-5">
<div class="row" data-masonry='{"percentPosition": true }'>
<div class="col-sm-6 col-lg-4 mb-4">
<div class="card bg-primary text-white">
<div class="card-body">
<h5 class="card-title">ボックス1</h5>
<p class="card-text">これは短いボックスです。</p>
</div>
</div>
</div>
<div class="col-sm-6 col-lg-4 mb-4">
<div class="card bg-success text-white">
<div class="card-body">
<h5 class="card-title">ボックス2</h5>
<p class="card-text">このボックスは少し高いです。Masonryは調整します！</p>
<p class="card-text">どれだけきれいに収まるか見てください。</p>
</div>
</div>
</div>
<!-- もっとボックスをここに追加 -->
</div>
</div>

これを分解しましょう：

  1. 我们はコンテナにrowを作成します。
  2. data-masonry='{"percentPosition": true }'属性は、このrowにMasonryレイアウトを使用するようにBootstrapに指示します。
  3. 各ボックスはcolumn（col-sm-6 col-lg-4）で、その中にカードがあります。
  4. 我们は異なる背景色（bg-primary、bg-success）を使用して、ボックスを視覚的に区別します。

Masonryレイアウトをカスタマイズする

基本的なレイアウトができたので、カスタマイズの方法を見てみましょう。

異なるサイズの要素を追加する

Masonryの美しさの一つは、異なるサイズの要素をどのように処理するかです。もっとボックスを追加して、さまざまなコンテンツを試してみましょう：

<div class="col-sm-6 col-lg-4 mb-4">
<div class="card bg-warning">
<div class="card-body">
<h5 class="card-title">ボックス3</h5>
<p class="card-text">これはとても高いボックスです！</p>
<p class="card-text">多くのコンテンツがあります。</p>
<p class="card-text">Masonryは完璧に収まるようにします。</p>
<p class="card-text">どれだけ高いになっても。</p>
</div>
</div>
</div>
<div class="col-sm-6 col-lg-4 mb-4">
<div class="card bg-info">
<div class="card-body">
<h5 class="card-title">ボックス4</h5>
<p class="card-text">再び短いボックスに戻ります。</p>
</div>
</div>
</div>

Masonryレイアウトに画像を追加する

Masonryは画像ギャラリーに非常に適しています。レイアウトに画像を追加しましょう：

<div class="col-sm-6 col-lg-4 mb-4">
<div class="card">
<img src="https://picsum.photos/300/200" class="card-img-top" alt="ランダムな画像">
<div class="card-body">
<h5 class="card-title">画像カード</h5>
<p class="card-text">このカードには画像があります。</p>
</div>
</div>
</div>

このコードは、Lorem Picsumからランダムな画像を追加します。画像は300x200ピクセルでロードされますが、異なるサイズの画像を試すこともできます。

高度な技術

Masonryアイテムのフィルタリング

Coolな機能之一は、Masonryアイテムをフィルタリングする機能を追加することです。いくつかのカテゴリーボタンを追加し、アイテムにカテゴリーを与えましょう：

<div class="container my-5">
<div class="mb-3">
<button class="btn btn-primary filter-btn" data-filter="all">すべて</button>
<button class="btn btn-secondary filter-btn" data-filter="category1">カテゴリー1</button>
<button class="btn btn-secondary filter-btn" data-filter="category2">カテゴリー2</button>
</div>
<div class="row" id="masonry-grid" data-masonry='{"percentPosition": true }'>
<div class="col-sm-6 col-lg-4 mb-4 masonry-item" data-category="category1">
<!-- アイテムコンテンツ -->
</div>
<div class="col-sm-6 col-lg-4 mb-4 masonry-item" data-category="category2">
<!-- アイテムコンテンツ -->
</div>
<!-- もっとアイテム... -->
</div>
</div>

これを動作させるために、JavaScriptを追加する必要があります：

<script>
document.addEventListener('DOMContentLoaded', function() {
var grid = document.querySelector('#masonry-grid');
var msnry = new Masonry(grid, {
percentPosition: true
});

var filterButtons = document.querySelectorAll('.filter-btn');
filterButtons.forEach(function(button) {
button.addEventListener('click', function() {
var filterValue = this.getAttribute('data-filter');
var items = grid.querySelectorAll('.masonry-item');

items.forEach(function(item) {
if (filterValue === 'all' || item.getAttribute('data-category') === filterValue) {
item.style.display = 'block';
} else {
item.style.display = 'none';
}
});

msnry.layout();
});
});
});
</script>

このスクリプトは以下ことを行います：

  1. Masonryをグリッドに初期化します。
  2. フィルターボタンのクリックイベントリスナーを追加します。
  3. ボタンがクリックされると、アイテムをカテゴリーに基づいて表示/非表示にします。
  4. フィルタリング後にmsnry.layout()を呼び出して、表示されるアイテムを再配置します。

結論

おめでとうございます！あなたは初めてのBootstrap Masonryレイアウトを作成しました。基本的なグリッドから高度なフィルタリングまで、動的な、反応するレイアウトを作成するためのツールを今持っています。

ウェブ開発をマスターする鍵は練習です。さまざまなコンテンツ、レイアウト、機能を試してみてください。ものを壊すのは怖くない – それが最も価値のあるコーディングの教訓を学ぶ方法の多くです。

続けて構築し、学び、最も重要な的是、楽しむことを忘れないでください！間もなく、あなたのウェブレイアウトは、最も熟練した石工さえもうらやむものになるでしょう。ハッピーコーディング！

Credits: Image by storyset

前のチュートリアル:
Bootstrap-固定フッターのナビバーDemo
次のチュートリアル:
Bootstrap スターターテンプレート デモ