[css] 画像一覧表示するWEBページで、横サイズ固定、縦サイズ可変の表示最適化について

画像一覧表示するサービスを作っているんですが、ECサイトの商品画像であったり、写真共有サービスであったり、SNSのようなコンテンツのgrid表示方式のような場合に、いくつかやり方があります。

色々な並べ方

table方式

縦横のカラム数（セル数）が固定であれば、この方法はブラウザ依存もなく、難なくできると思いますが、やはり経理データのような計算表示に向いているのがtable表示ですね。

float方式

もともと、divを並べていくいだけのサイトを一昔前によく使われていて、その時の代表方式が「float」方式であったと言えるでしょう。 ただ、floatは、eolをしっかり見極めて、cssでその閉じフラグをセットしなければいけないので、ページ内での崩れが発生しているサイトは沢山あったため、エンジニア達はあまり使いたがらない方式でした。

inline方式

非常にベタな方式ですが、オブジェクト（コンテンツ）を横並びにできて、画面幅の改行にも柔軟に対応できるinline方式は、一番古くから使われている手法です。 ただ、inlineはやはり文字列などのフォント表示に向いているため、コンテンツなどのboxを並べる場合、縦幅の統一されている横幅が不規則な場合以外は、見た目があまり美しくなりません。

flex方式

グリッド表示で、比較的新しく、便利に使えそうなのが、このflex方式ですが、これも、縦幅が可変には向いていません。

column方式

そこで今回調査しておきたいのは、このcolumn方式で、pinterestの表示に近い見た目が得られます。 pinterest ※最新バージョンのpinterestはすでにcolumn方式では無くなっていますが、処理速度を高速に保てるという特徴もあるcolumn方式は是非とも極めておきたい手法のひとつです。

column設定 #1 簡単設定

columnの設定は非常に簡単にできます。 親要素と子要素の２階層で、子要素が沢山のコンテンツリストになっていれば、その親要素に以下のようなcssを記述するだけで、OKです。 columns:200px auto; columns : １カラムの横幅サイズ 最適なカラム数 最適なカラム数は、１カラムの横幅を下回っていると、サイズの方が優先されます。 通常は、サイズ指定をして、カラム数には"auto"を入れておくといいでしょう。 またこれ以外にも、カラム数をマストにしたい場合は、以下のように書いてもいいでしょう。 column-count : 3; こうすると、各コンテンツのサイズではなく、カラム数が優先されます。 レスポンシブの場合は、mediaクエリーでサイズ毎にカラム数を切り替えてもいいですが、columnsでサイズ指定した方が扱いやすいと思いますよ。

See the Pen columns-1 by YugetaKoji (@geta1972) on CodePen.

サンプルを見てもらうと気がつくと思いますが、カラムをまたいで、コンテンツが分断されています。 文字列などの場合は、これでもいいかもしれませんが、画像などを扱う場合は、少しよろしくないです。

column設定 #2 分断されない設定

コンテンツの分断を解消するのも非常に簡単で、コンテンツ部分に以下の設定を加えてあげるだけで構いません。 display:inline-block; 拍子抜けするぐらい簡単ですよね。

See the Pen columns-2 by YugetaKoji (@geta1972) on CodePen.

いかがでしょうか？

column設定 #3 コンテンツの縦サイズをランダムに・・・

そもそもの目的が縦サイズが可変のコンテンツということなので、サンプルも対応しておきます。

See the Pen columns-3 by YugetaKoji (@geta1972) on CodePen.

randomで表示しているので、問題が見つけにくいですが、比較的うまく言っているようにも見えます。 しかし、あまりサイズが大きく異るコンテンツを並べる場合、各カラムでの個数に偏りが生じる事もあるので、最小コンテンツと最大コンテンツを1.5倍ぐらいにしてあげると、見栄えが良さそうですね。