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

Pocket
LINEで送る
GREE にシェア
LinkedIn にシェア

画像一覧表示するサービスを作っているんですが、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の設定は非常に簡単にできます。
 

親要素と子要素の2階層で、子要素が沢山のコンテンツリストになっていれば、その親要素に以下のようなcssを記述するだけで、OKです。
 

 

columns : 1カラムの横幅サイズ 最適なカラム数
 

最適なカラム数は、1カラムの横幅を下回っていると、サイズの方が優先されます。
 

通常は、サイズ指定をして、カラム数には”auto”を入れておくといいでしょう。
 

またこれ以外にも、カラム数をマストにしたい場合は、以下のように書いてもいいでしょう。
 

 

こうすると、各コンテンツのサイズではなく、カラム数が優先されます。
 

レスポンシブの場合は、mediaクエリーでサイズ毎にカラム数を切り替えてもいいですが、columnsでサイズ指定した方が扱いやすいと思いますよ。
 

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


 

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

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

コンテンツの分断を解消するのも非常に簡単で、コンテンツ部分に以下の設定を加えてあげるだけで構いません。
 

 

拍子抜けするぐらい簡単ですよね。
 

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倍ぐらいにしてあげると、見栄えが良さそうですね。

Leave a Reply

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です