CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

HTMLとCSSで作るレスポンシブ画像グリッドの実装方法【サンプルコード付き】

Webサイトで複数の画像をきれいに並べたいときに役立つのが、レスポンシブ画像グリッドです。画面幅に合わせて列数が自動的に変化するため、PCでもタブレットやスマートフォンでも見やすいレイアウトを実現できます。

この記事では、Flexboxとメディアクエリを組み合わせて、HTMLとCSSだけでレスポンシブな画像グリッドを作る方法を、実際のコード例とともにわかりやすく解説します。

レスポンシブ画像グリッドのサンプルコード

以下が、HTMLとCSSのみで作成できるレスポンシブ画像グリッドの完全なコードです。そのまま保存してブラウザで開けば、すぐに動作を確認できます。

<!DOCTYPE html>
<html>
<style>
* {
   box-sizing: border-box;
}
h1 {
   text-align: center;
}
.outer-grid {
   display: flex;
   flex-wrap: wrap;
   padding: 0 4px;
}
.inner-grid {
   flex: 25%;
   max-width: 25%;
   padding: 0 4px;
}
.inner-grid img {
   margin-top: 8px;
   width: 100%;
   padding: 10px;
}
@media screen and (max-width: 800px) {
   .inner-grid {
      flex: 50%;
      max-width: 50%;
   }
}
@media screen and (max-width: 600px) {
   .inner-grid {
      flex: 100%;
      max-width: 100%;
   }
}
</style>
<body>
<h1>レスポンシブ画像グリッドのサンプル</h1>
<div class="outer-grid">
<div class="inner-grid">
<img src="https://images.pexels.com/photos/1083822/pexels-photo-1083822.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"/>
<img src="https://images.pexels.com/photos/1083822/pexels-photo-1083822.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"/>
<img src="https://images.pexels.com/photos/1083822/pexels-photo-1083822.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"/>
</div>
<div class="inner-grid">
<img src="https://images.pexels.com/photos/3805102/pexels-photo-3805102.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"/>
<img src="https://images.pexels.com/photos/3805102/pexels-photo-3805102.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"/>
<img src="https://images.pexels.com/photos/3805102/pexels-photo-3805102.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"/>
</div>
<div class="inner-grid">
<img src="https://images.pexels.com/photos/3863778/pexels-photo-3863778.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"/>
<img src="https://images.pexels.com/photos/3863778/pexels-photo-3863778.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"/>
<img src="https://images.pexels.com/photos/3863778/pexels-photo-3863778.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"/>
</div>
</div>
</body>
</html>

コードのポイント解説

  • box-sizing: border-box;
    すべての要素に指定することで、paddingやborderを含んだ状態でサイズ計算され、レイアウト崩れを防げます。
  • .outer-grid（display: flex; flex-wrap: wrap;）
    外側のコンテナをFlexboxにして折り返しを許可することで、柔軟なグリッドレイアウトの土台を作っています。
  • .inner-grid（flex: 25%; max-width: 25%;）
    各カラムは親要素幅の25%を基準とする指定で、最大4列の構成を想定しています。この例では3つのカラムを使用しており、厳密に3列にしたい場合は「flex: 33.33%」に変更してください。
  • @media screen and (max-width: 800px)
    画面幅が800px以下になると、各カラムが50%（2列表示）に切り替わります。
  • @media screen and (max-width: 600px)
    さらに600px以下になると100%（1列表示）になり、スマートフォンでも画像が大きく見やすく表示されます。

実行結果

上記のコードをブラウザで開くと、次のような画像グリッドが表示されます。

HTMLとCSSで作るレスポンシブ画像グリッドの実装方法【サンプルコード付き】

ブラウザのウィンドウ幅を狭めていくと、グリッドは3列 → 2列 → 1列と自動的に組み替えられます。これがメディアクエリによるレスポンシブ対応の効果です。

HTMLとCSSで作るレスポンシブ画像グリッドの実装方法【サンプルコード付き】

まとめ

Flexboxとメディアクエリを組み合わせれば、JavaScriptに頼らずとも手軽にレスポンシブな画像ギャラリーを作成できます。列数（flexの値）やブレークポイント（800px・600px）は、サイトのデザインに合わせて自由に調整してみてください。より複雑なレイアウトが必要になった場合は、CSS Gridの活用も検討すると良いでしょう。

  1. CSSとJavaScriptで拡張グリッド（クリックで展開するグリッド）を作成する方法

    CSSとJavaScriptを組み合わせることで、カードをクリックすると詳細パネルが展開される「拡張グリッド（Expanding Grid）」を簡単に実装できます。本記事では、3カラム構成のグリッドを例に、具体的な実装手順をわかりやすく解説します。 実装のポイント クリックイベント：各カラムにonclick属性を設定し、クリックされたカラムに対応するタブを開きます。 表示の切り替え：新しいタブを開く前に既存のタブをすべて非表示にすることで、常に1つのタブだけが展開された状態を保ちます。 閉じるボタン：タブ右上の「×」ボタンをクリックするとパネルが閉じ、元のグリッド表示に戻ります。 サンプル

  2. CSSのfilterプロパティで画像を白黒（グレースケール）に変換する方法

    CSSのfilterプロパティにグレースケール値を指定することで、カラー画像を簡単に白黒画像へと変換できます。filterプロパティは、ぼかし（blur）やドロップシャドウ（drop-shadow）など、さまざまな特殊効果を画像に適用できる便利な機能です。基本の構文CSSのfilterプロパティの構文は以下の通りです。Selector {    filter: grayscale(100%);    -webkit-filter: grayscale(100%); }grayscale(100%)で完全な白黒になり、パーセンテージを下げることで部分的に彩