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

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

デモのキャプチャ

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;
  }
}

まとめ

このテクニックの素晴らしい点は、pure CSSなので非常にスムースで速いということです。
ブラウザのサイズ変更に対して、素早くレイアウトを変更します。

ブラウザのサポートはIE以外の全てです。

対応ブラウザ
  • Firefox3.6+
  • Opera11.1+
  • Safari4+
  • Chrome10+
  • おそらくIE10

[ad#ad-2]

sponsors

top of page

©2018 coliss