顧客側 Topページ

はじめに

・bootstrap導入済
・namespace使用
・device導入済

今回の完成イメージ

テキストの背景に画像を指定して表示します。
新着商品を4件表示します。

---

コントローラー

public/homes_controller.rb

class Public::HomesController < ApplicationController
  def top
    @items = Item.order(created_at: :desc).limit(4)
  end
end

@items インスタンス変数に、新着商品の情報を代入しています。具体的には、Item.order(created_at: :desc).limit(4) というコードによって、商品（Item）を新着順（作成日時 created_at の降順 :desc） に並べ、そのうち最新の4つだけを取得します。これにより、ホームページのトップページでは最新の4つの商品が表示されるようになります。

@items はインスタンス変数なので、この @items を利用して新着商品の情報を表示することが可能です。

views ページ作成

public/top.thml.erb

<div style="background: url('<%= asset_path '表示したい画像URL' %>') center center no-repeat; background-size: auto; text-align: center;">
  <h1>ようこそ、ながのCAKEへ！</h1>
  <p>このサイトは、ケーキ販売のECサイトになります。</p>
  <p>会員でない方も商品の説明はできますが、</p>
  <p>購入には会員登録が必要になります。</p>
</div>
<h2>新着商品</h2>
<div class="new-items" style="display: flex; justify-content: space-around; padding: 0 100px;">
  <% @items.each do |item| %>
    <div style="padding: 10px; background-color: #ffffff; flex: 1; margin: 10px;">
      <img style="width: 100%; height: auto; object-fit: contain; margin-bottom: 10px;" src="<%= url_for(item.image) %>">
      <h5 style="margin: 0; padding: 0;"><%= item.name %></h5>
      <p style="margin: 0; padding: 0;">¥<%= number_with_delimiter(item.price) %></p>
    </div>
  <% end %>
</div>

<p style="text-align: right;"><%= link_to 'すべての商品を見る＞', items_path %></p>

div class="new-items" style="display: flex; justify-content: space-around; padding: 0 100px;"
: new-items
new-itemsというクラス名が付けられたdiv要素を作成しています。このdiv要素は、商品リスト全体を含むコンテナとして機能します。そのスタイルはFlexboxを使用して水平にアイテムを配置し、周囲に一定の間隔を持つよう設定されています。

<% @items.each do |item| %>
eachを使用してitemを順番に取り出します。
（今回は４つの要素を取り出せるようにします）

div style="padding: 10px; background-color: #ffffff; flex: 1; margin: 10px;"
ここで新しいdiv要素を作成しています。これは個々の商品を表示するコンテナとして機能します。

div style="padding: 10px; background-color: #ffffff; flex: 1; margin: 10px;"
ここで新しいdiv要素を作成しています。これは個々の商品を表示するコンテナとして機能します。

img style="width: 100%; height: auto; object-fit: contain; margin-bottom: 10px;" src="<%= url_for(item.image) %>"
商品の画像を表示します。item.imageからURLを生成し、それをsrc属性に設定しています。

<%= item.name %>
商品の名前を表示するh5要素を作成しています。

style="margin: 0; padding: 0;">¥<%= number_with_delimiter(item.price) %>
商品の価格を表示します。価格は
number_with_delimiterヘルパーメソッドを使ってフォーマットされ、三桁ごとに区切り記号が入ります。

補足

　cssが適応されない

cssを適応させるには、app/views/layouts/application.html.erb ファイルでstylesheet_link_tag ヘルパーを使用してCSSをリンクしていることが必要

以下のように追加

<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>