ブログの記事一覧や、商品ラインナップなどを表示する時に、数多く見せようと考えるとリスト表示よりもタイリング表示の方が効率的です。
タイリング表示
リスト表示
これらの表示特製も踏まえてタイリング時に便利な「FlexBox」という手法をメモしておきます。
今回の記事は前回書いたサムネイル表示の続きとして書いています。
[css] サムネイル画像の中央表示（トリミング）
表示方法あれこれ
タイリング表示とサムネイル表示の他に「Masonry」というのがあり、レンガなどの互い違いやサイズの違うモノのタイリング表示に使う表示方法です。
WEBページで使うときは、画像など固定サイズのものを表示する際は、タイリング表示が良く、コメントなどの詳細を重要視する場合は、リスト表示、文字数などが一定でないブログのタイトルやニュース記事表示などには、Masonryが良さそうです。
ところで、「Masonry」ってなんて読むんだろう？って思っていたら「メイソンリー」とか「メイソリー」という風に読むらしいです。
参考：
weblio
他にもマックのデスクトップでおなじみの「CoverFlow」というのもあります。
これは、CDなどのアルバムジャケットを表示する時に有効なのかもしれませんが、僕は通常ではほぼ使いません。
FlexBox
今回はタイリング表示におけるCSSで「FlexBox」というテクニックを使ってみました。
通常のタイリング表示は、サイズ固定であればいいのですが、記事内容によって縦サイズが変わる場合、下記のような状態になる事があります。
画像をみてわかる通り、項目が左上から右側に向けて並んでいるんですが、004の項目が少し長くなっているため、開業された「test-2」という項目は、引っかかって表示されている状態になります。
これを回避するには、横にならぶ項目の高さを一定にする必要がありますが、CSSだけで行おうとすると、全ての項目のサイズを変更することになってしまいます。
ここで便利なのが「box-sizing」という方式で「flex」という属性を使うと、横一列の高さを統一してくれるという便利機能があります。
cssの記述は、以下の通りです。
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
box-sizing:border-box;
通常の指定は前回記事をご覧ください。それに上記指定を加えてあげると、以下のように整った表示になります。
文字数が違って縦サイズが違うはずなのに、横並びで揃っている事がわかります。
JSのライブラリを使ってこうしたサイズ調整をする事もできますが、表示スピードや端末電力負荷などを考えると、CSSで簡単に行う事が最善にも思えます。
ただし、CSSは、ブラウザ依存する可能性も高いので、表示確認を怠らないようにしましょう。
この記事もGoogleChromeでしか表示確認していないので、ほかのブラウザでは、崩れているかもしれません。
