多くの商品などの画像を並べるとき、↓のようなリストで実現することがある。僕は嫌いなのだがスマホやタブレット対応を考えると横スクロールに対応する必要がある。こんなリストをCSSで組もうとするといくつか方法が考えられると思うのでまとめておいた。
各実装方法
inline-blockによる実装
これは最も簡単で、最近のブラウザでなくてもレンダリング出来ることが強み。しかもデモにあるようにリストの両端にマージンを付与することが出来る。このマージンは単にデザインに必要という場合だけでなく、カルーセルだった場合にボタンを置く領域にもなる。個人的にはこれをおすすめしたい。
methodと書いてあるところがミソ
flexによる実装
これも簡単なのでおすすめ。ただ、IE9以下だとレンダリングできず、両端にマージンをつけることが出来ない。許容出来れば良いと思う。
tableによる実装
これはあまり使わない。border-spacingで間隔を空けるが両端のマージンについては対応が困難。一応両端のtdで実現はできそう。td自体にはwidthを指定できないのでtdの子要素で指定する必要がある。正直考えることが多いしコードもでかくなるので嫌い。
grid-layoutによる実装
リスト内の要素数が固定の場合は実装できそう。やったことないけど。
まとめ
inline-blockによる実装かflexによる実装がおすすめ。他にも簡単でレンダリングが崩れない実装があるかもしれないので色々試して欲しい。
