【Masonry】高さが違う画像をグリッドレイアウトでいい感じに並べる②

Last updated at 2024-12-21Posted at 2024-12-14

前回の続きの記事です。

今回は細かな調整をしていきます。

現在のコード

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>

  <p>メイソンリー練習</p>

  <div class="masonry">
    <div class="masonry-item"><img src="https://via.placeholder.com/300x200" alt="Placeholder"></div>
    <div class="masonry-item"><img src="https://via.placeholder.com/300x250" alt="Placeholder"></div>
    <div class="masonry-item"><img src="https://via.placeholder.com/300x180" alt="Placeholder"></div>
    <div class="masonry-item"><img src="https://via.placeholder.com/300x300" alt="Placeholder"></div>
    <div class="masonry-item"><img src="https://via.placeholder.com/300x150" alt="Placeholder"></div>
    <div class="masonry-item"><img src="https://via.placeholder.com/300x220" alt="Placeholder"></div>
  </div>

  <!-- jQueryのCDN -->
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

  <!-- MasonryのCDN 本体 -->
  <script src="https://cdn.jsdelivr.net/npm/masonry-layout@4/dist/masonry.pkgd.min.js"></script>

  <!-- imagesLoadedのCDN 画像が全部読み込まれてから動くようにしてくれるもの -->
  <script src="https://cdn.jsdelivr.net/npm/imagesloaded@4/imagesloaded.pkgd.min.js"></script>

  <script>
    $('.masonry').masonry({
      itemSelector: '.masonry-item',
      gutter: 0,
    });
  </script>
</body>
</html>

Q1：画像の左右の余白を消したい場合は？

A1：gutterを0にします。

index.html

  <script>
    $('.masonry').masonry({
      itemSelector: '.masonry-item',
      gutter: 0,  // 左右の余白を削除
    });
  </script>

Q2：縦に並ぶ画像の間の余白を消したい場合は？

A2：CSSで画像の親要素のline-heightを0にします。

index.html

<div class="masonry-item"><img src="https://via.placeholder.com/300x200" alt="Placeholder"></div>

index.html

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  
    <style>
    .masonry-item {
      line-height: 0; 
    }
    </style>
    
</head>

画像は文字として認識されていて、行間の設定が適応されてしまうので、それを消せばよいのです。

縦と横の余白をなくしてみると、以下のようになります。

Q3：2列にするには？

A3：画像の親要素のwidthを50%にし、画像のwidthを100%にします。

index.html

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  
    <style>
    .masonry-item {
      line-height: 0; 
      width: 50%;
    }

    img {
      width: 100%;
    }
    </style>
    
</head>

Q4：3列にして、かつ真ん中の列は幅を大きめにするには？

A4：まず、親要素のwidthを一旦25%にします。そして、中央の画像の親要素に追加のクラスをつけて、widthを50%にします。

index.html

<div class="masonry-item"><img src="https://via.placeholder.com/300x200" alt="Placeholder"></div>
<div class="masonry-item large"><img src="https://via.placeholder.com/300x250" alt="Placeholder"></div>
<div class="masonry-item"><img src="https://via.placeholder.com/300x180" alt="Placeholder"></div>

index.html

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  
    <style>
    .masonry-item {
      line-height: 0; 
      width: 25%;
    }

    .large {
      width: 50%;
    }

    img {
      width: 100%;
    }
    </style>
    
</head>

全体のコード

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .masonry-item {
      line-height: 0; 
      width: 25%;
    }

    .large {
      width: 50%;
    }

    img {
      width: 100%;
    }

  </style>
</head>
<body>

  <p>メイソンリー練習</p>

  <div class="masonry">
    <div class="masonry-item"><img src="https://via.placeholder.com/300x200" alt="Placeholder"></div>
    <div class="masonry-item large"><img src="https://via.placeholder.com/300x250" alt="Placeholder"></div>
    <div class="masonry-item"><img src="https://via.placeholder.com/300x180" alt="Placeholder"></div>
    <div class="masonry-item"><img src="https://via.placeholder.com/300x300" alt="Placeholder"></div>
    <div class="masonry-item"><img src="https://via.placeholder.com/300x150" alt="Placeholder"></div>
    <div class="masonry-item"><img src="https://via.placeholder.com/300x220" alt="Placeholder"></div>
  </div>

  <!-- jQueryのCDN -->
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

  <!-- MasonryのCDN 本体 -->
  <script src="https://cdn.jsdelivr.net/npm/masonry-layout@4/dist/masonry.pkgd.min.js"></script>

  <!-- imagesLoadedのCDN 画像が全部読み込まれてから動くようにしてくれるもの -->
  <script src="https://cdn.jsdelivr.net/npm/imagesloaded@4/imagesloaded.pkgd.min.js"></script>

  <script>
    $('.masonry').masonry({
      itemSelector: '.masonry-item',
      gutter: 0,
    });
  </script>
</body>
</html>

あとは、画像の高さを調整すれば綺麗に長方形になります。
また機会があれば。

参考

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up