画像一覧表示するサービスを作っているんですが、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.
いかがでしょうか？
