[CSS]スクリプト無しで、高さがバラバラの画像を隙間無く配置するスタイルシートのテクニック

サイト構築 -CSS

Post on:2011年7月27日

sponsorsr

ブラウザのサイズを変更してもそれに合わせて、高さがバラバラの画像をグリッドに沿って隙間無く配置するスタイルシートのテクニックを紹介します。

Seamless Responsive Photo Grid
デモページ

[ad#ad-2]

下記は各ポイントを意訳したものです。

画像を隙間無く配置する実装方法

HTML

HTMLはimg要素をsection要素で内包したシンプルなものです。

<section id="photos">
  <img src="images/dog-1.jpg" alt="Little doggie">
  <img src="images/cat-1.jpg" alt="Little kittie">
  ...
</section>

CSSをオフにすると、img要素はinline-blockなので、下記のように連続して並ぶだけです。

デモページ：CSSオフの表示

こういったエレメントを垂直方向に隙間無く並べるには、jQueryのプラグイン「jQuery Masonry」を使用して解決することもできますが、JavaScriptの場合はwindow.resizeイベントに頼るという問題点があります。

ここではCSSだけを使用して、垂直方向に隙間無く並べます。
実装方法は「Masonry CSS」を参考にしました。

CSS

カラム間のgapは0にし、img要素の幅に100%を指定してカラムの幅をつくるようにします。

#photos {
   /* Prevent vertical gaps */
   line-height: 0;

   -webkit-column-count: 5;
   -webkit-column-gap:   0px;
   -moz-column-count:    5;
   -moz-column-gap:      0px;
   column-count:         5;
   column-gap:           0px;

}
#photos img {
  /* Just in case there are inline attributes */
  width: 100% !important;
  height: auto !important;
}

上記のスタイルシートで縦5列に配置されるようになりました。しかし、ブラウザのビューポートが狭い場合は5列だと狭く感じるかもしれません。
そこで、Media Queriesを利用してカラムの数を調整します。

CSS

ビューポートのサイズに合わせて、カラム数を変更します。

@media (max-width: 1200px) {
  #photos {
  -moz-column-count:    4;
  -webkit-column-count: 4;
  column-count:         4;
  }
}
@media (max-width: 1000px) {
  #photos {
  -moz-column-count:    3;
  -webkit-column-count: 3;
  column-count:         3;
  }
}
@media (max-width: 800px) {
  #photos {
  -moz-column-count:    2;
  -webkit-column-count: 2;
  column-count:         2;
  }
}
@media (max-width: 400px) {
  #photos {
  -moz-column-count:    1;
  -webkit-column-count: 1;
  column-count:         1;
  }
}