LP(ランディングページ)の制作で気づいたのですが、横サイズを1200pxとしたとき、意外とその空間でコーディングするのは、難しいという体験をしました。

格安のLP制作になると、画像を作って、それをボン! と貼るのが主流なので、もはやコーディングというより、Illustrator、Photoshop、広告投資の勝負になっているところもあったりしますが、管理人はきちんとコーディングできるところはしております。

表題のとおり、LP制作に使えそうな、写真画像横並びのCSSを作ってみました。

このソースコードであれば、2つの画像でも3つの画像でも4つの画像でも、レスポンシブ用でOKかな。ただ、画像が落ちた時にセンタリングができればいいのだけど、何枚画像を挿入すればいいかわからないとき、インスタント的に使えますので便利かと思います。

[email protected] screenで調整すればいいのかなと。

HTMLは以下のとおりです。

完成サイトデモぺージは、このようになります。ウインドウ画面を小さくしたり大きくしたりしてみてください。とてもシンプルでいいかなと思っております。

デモページ

ランディングページの制作は、Photoshopやイラストレータなどで上がってくるものからコーディングが始まります。こういった技をいくつも備えておいて、そして研いでおかないと時間との戦いになった場合、勝てないですね……。