do7be.exports

寿司の話かエンジニアリングの話

横スクロール出来るリストを作るときのCSSについて

多くの商品などの画像を並べるとき、↓のようなリストで実現することがある。僕は嫌いなのだがスマホタブレット対応を考えると横スクロールに対応する必要がある。こんなリストをCSSで組もうとするといくつか方法が考えられると思うのでまとめておいた。

f:id:do7be:20171003210953p:plain

各実装方法

inline-blockによる実装

これは最も簡単で、最近のブラウザでなくてもレンダリング出来ることが強み。しかもデモにあるようにリストの両端にマージンを付与することが出来る。このマージンは単にデザインに必要という場合だけでなく、カルーセルだった場合にボタンを置く領域にもなる。個人的にはこれをおすすめしたい。

inline-block方式

methodと書いてあるところがミソ

flexによる実装

これも簡単なのでおすすめ。ただ、IE9以下だとレンダリングできず、両端にマージンをつけることが出来ない。許容出来れば良いと思う。

flex方式

tableによる実装

これはあまり使わない。border-spacingで間隔を空けるが両端のマージンについては対応が困難。一応両端のtdで実現はできそう。td自体にはwidthを指定できないのでtdの子要素で指定する必要がある。正直考えることが多いしコードもでかくなるので嫌い。

table方式

grid-layoutによる実装

リスト内の要素数が固定の場合は実装できそう。やったことないけど。

まとめ

inline-blockによる実装かflexによる実装がおすすめ。他にも簡単でレンダリングが崩れない実装があるかもしれないので色々試して欲しい。