CSS Grid vs Flexbox：メイソンリーレイアウトに最適な方法は？

2024-06-23

CSSだけでメイソンリーレイアウトを作成する方法

従来、メイソンリーレイアウトを作成するには、JavaScriptライブラリを使用する必要がありました。しかし、CSS Grid Level 3の登場により、CSSのみで簡単に実現できるようになっています。さらに、Flexboxを用いた方法も存在します。

ここでは、HTML、CSS、Flexboxを用いたメイソンリーレイアウトのプログラミングについて、初心者でも分かりやすく解説します。

HTMLの準備

まず、メイソンリーレイアウトを表示するのに必要なHTML構造を準備します。以下の例では、div要素を複数個並べて、それぞれに画像と説明文を含めています。

<div class="masonry">
  <div class="item">
    <img src="image1.jpg" alt="画像1">
    <p>説明文1</p>
  </div>
  <div class="item">
    <img src="image2.jpg" alt="画像2">
    <p>説明文2</p>
  </div>
  </div>

上記のように、各要素を.itemというクラスで囲み、親要素には.masonryというクラスを付与します。

CSS Gridを使ったメイソンリーレイアウト

CSS Gridを用いる方法は、最もシンプルで分かりやすい方法です。以下のCSSを追加することで、メイソンリーレイアウトを作成できます。

.masonry {
  display: grid;
  grid-template-rows: masonry;
  grid-gap: 10px; /* アイテム間の隙間 */
}

.item {
  grid-column: span 1; /* 各アイテムが1列を占有 */
  grid-auto-rows: minmax(auto, 1fr); /* アイテムの高さを自動調整 */
}

display: grid;: 要素をグリッドレイアウトとして表示します。
grid-template-rows: masonry;: 行の自動生成を有効にします。これがメイソンリーレイアウトを実現するキーです。
grid-gap: 10px;: アイテム間の隙間を10pxに設定します。
grid-column: span 1;: 各アイテムが1列を占有するようにします。
grid-auto-rows: minmax(auto, 1fr);: アイテムの高さを自動調整します。autoはコンテンツに合わせて高さを調整し、1frは残りのスペースを均等に分配します。

Flexboxを使ったメイソンリーレイアウト

Flexboxを用いる方法は、CSS Gridよりも古い方法ですが、比較的簡単に実装できます。以下のCSSを追加することで、メイソンリーレイアウトを作成できます。

.masonry {
  display: flex;
  flex-wrap: wrap; /* アイテムを複数行に折り返す */
  align-content: flex-start; /* アイテムを上揃えにする */
}

.item {
  flex: 1 0 auto; /* アイテムの幅を自動調整 */
  margin: 10px; /* アイテム間の隙間 */
}

flex-wrap: wrap;: アイテムを複数行に折り返します。
align-content: flex-start;: アイテムを上揃えにします。
flex: 1 0 auto;: アイテムの幅を自動調整します。

補足

上記はあくまでも基本的な例です。デザインや要件に合わせて、CSSを調整する必要があります。
メディアクエリを使用して、画面サイズに応じてレイアウトを変更することもできます。
JavaScriptライブラリを使用する方が、より高度なメイソンリーレイアウトを作成できますが、CSSのみでも十分な表現力があります。

メイソンリーレイアウトは、画像ギャラリーやブログ記事など、様々なコンテンツに活用できる便利なレイアウトです。今回紹介した方法を参考に、ぜひご自身のサイトに取り入れてみてください。

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>メイソンリーレイアウト</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="masonry">
    <div class="item">
      <img src="image1.jpg" alt="画像1">
      <p>説明文1</p>
    </div>
    <div class="item">
      <img src="image2.jpg" alt="画像2">
      <p>説明文2</p>
    </div>
    <div class="item">
      <img src="image3.jpg" alt="画像3">
      <p>説明文3</p>
    </div>
    <div class="item">
      <img src="image4.jpg" alt="画像4">
      <p>説明文4</p>
    </div>
    <div class="item">
      <img src="image5.jpg" alt="画像5">
      <p>説明文5</p>
    </div>
  </div>
</body>
</html>

CSS

.masonry {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 10px; /* アイテム間の隙間 */
}

.item {
  flex: 1 0 auto; /* アイテムの幅を自動調整 */
  padding: 10px; /* アイテム内側の余白 */
  border: 1px solid #ccc; /* アイテムのボーダー */
  box-sizing: border-box; /* アイテムの幅にボーダーを含める */
}

.item img {
  width: 100%; /* 画像をアイテム全体に広げる */
  height: auto; /* アスペクト比を維持する */
  margin-bottom: 10px; /* 画像と説明文の間隔 */
}

このコードを実行すると、以下のようになります。

[画像のマレイソンリーレイアウト]

アイテムは自動的に複数行に並べられ、それぞれの高さに合わせて隙間なく配置されます。画像の下には説明文が表示されます。

ポイント

gapプロパティでアイテム間の隙間を調整できます。

このサンプルコードを参考に、ご自身のサイトにメイソンリーレイアウトを取り入れてみてください。

メイソンリーレイアウトを作成するその他の方法

JavaScriptライブラリを使用する

MasonryやIsogridなどのJavaScriptライブラリを使用すると、より高度なメイソンリーレイアウトを作成できます。これらのライブラリは、様々な機能を提供しており、複雑なレイアウトやアニメーションも実現可能です。

CSS Columnsモジュールを使用すると、列を自動的に生成することができます。これは、シンプルなメイソンリーレイアウトを作成する場合に有効です。

カスタムレイアウトエンジンを使用する

Grid GardenやGolden Gridなどのカスタムレイアウトエンジンを使用すると、より柔軟なレイアウトを作成できます。これらのエンジンは、独自のアルゴリズムを使用してアイテムを配置し、より有機的なレイアウトを実現できます。

それぞれの方法のメリットとデメリット

方法	メリット	デメリット
CSS Grid	シンプルで分かりやすい	高度な機能に制限がある
Flexbox	比較的簡単に実装できる	レイアウトの自由度が低い
JavaScriptライブラリ	高度な機能が豊富	複雑で理解しにくい
CSS Columns	シンプルなレイアウトに適している	複雑なレイアウトには不向き
カスタムレイアウトエンジン	柔軟なレイアウトを作成できる	導入や設定が複雑