商品一覧画面を実装しよう

この章では、ECサイトのトップページでもある、商品一覧画面を作成します。

はじめにサイト内で使用する画像、アイコンのダウンロードなど、UIの部分の準備をした後、実装に入ります。

この章の目標物

この章で作成する商品一覧画面は以下のようなイメージです。

画面上部にはサイト名である「Techpit Clothes」というテキストとカートアイコンを表示します。

メインのコンテンツ部分には、商品の画像、商品名、価格を一覧で表示します。

本章完了時点のソースコード

本章完了時点のソースコードは以下の画面で確認できます。

• https://github.com/Techpit-Contents/laravel-fashion-ec-app/tree/chapter-2

エラーが発生したり、うまく動作しなかったりした場合など、必要に応じて参照してください。

次のパートでは、CSSのフレームワークであるBootstrapの導入をおこないます。