規則的に複数の画像を並べる

 
同じサイズの複数の画像を隙間なく規則的に並べるビルボード。それぞれ別の画像でありながら隙間なくレイアウトすることで一つの大きなビルボードの印象になります。
 
また、ブロックアニメーションでフェード（右へ）を設定することで、動きがでて流れるように表示されていきます。また、画像はそれぞれ独立していますので、個別の画像入れ替えも簡単で、パソコンとスマホで横に並ぶ数をそれぞれに指定できるのでファーストビューでの表示を調整可能です。
 
ペットや観葉植物、陶器、ヘアスタイルなど多くの商品・例を並べたいような時におすすめです。
 
 

billboard_009

ここの画像は300px角のシェイプに画像を読み込んでいます。規則的に同じサイズで並べるためにシェイプで作った枠に画像を読み込ませるようにしています。
また、このレイアウトは１つのビルボードで１２枚の画像を配置していますので、ここの画像サイズはできる限り小さくなるようにサイズや圧縮（jpg）を適切に設定してから利用するよう注意が必要です。
 

billboard_009a

こちらは400px × 260pxのシェイプに画像を読み込んでいます。
パソコン表示ではブロックの左右に30pxの余白を設けていますが、スマホでは画面幅いっぱいになるように余白はゼロにしています。また、CSSで画像に対して2pxのpaddingを設定することで、画像間に若干のすきまができるようにしています。