概要

この記事では、Bootstrap導入済みのRailsアプリケーションにおいて、ECサイトのトップページに表示する新着商品のレイアウトの整え方について言及しています。

環境

Rails: 6.1.4
Ruby: 3.1.2
Bootstrap: 4.5

結果

結果として、下記の画像のような感じでレイアウトが整っていれば良いと思います。
今回は割と簡素にしているので、ここからさらにレイアウトを改善して行っていただければと思います。

実装

この章では実装の流れについて説明をしていきます。

注意
Contorllerの処理やViewの処理で使っている変数等々は、適宜置き換えて実装いただくようにお願いいたします。

Controllerの記述

新着商品を「4つ」表示すると仮定して処理を書いていきます。

where句で、is_saled: trueを指定し、販売中のものだけに絞る
order句で、created_at: "DESC"を指定し、データ作成日時の降順にする
limit句で、4を指定し、データの件数を4件に絞る

最終的に @itemsの中身は、販売中かつ、新しく登録した商品の中で最新のデータから4件抽出したデータが入るということになります。

homes_controller

def top
    @items = Item.where(is_saled: true).order(created_at: "DESC").limit(4)
end

Viewの記述

次にViewの記述をしていきます。
レイアウトはBootstrapのclassのみでスタイリングを行います。

top.html.erb

<div class="d-flex flex-wrap">
    <% @items.each do |item| %>
        <%= link_to item_path(item.id), class: "text-decoration-none w-25" do %>
            <div class="card m-2 p-1 card-hover">
                <%= image_tag item.get_product_image(100,100), class: "card-img-top rounded shadow-sm" %>
                <div class="card-body text-body">
                    <h5 class="card-title text-primary"><%= item.name %></h5>
                    <p class="card-text text-primary">¥<%= item.price %></p>
                </div>
            </div>
        <% end %>
    <% end %>
</div>

簡単にclassの説明を書いておきます。
chatGPT(GPT-4)に検索・要約してもらいました。間違っている点があるかもしれませんが、参考程度に見ていただけると良いと思います。
詳しく知りたい方は下記のサイトで調べてみてください。

mb-4
「margin-bottom」を要素に付与するclassであり、要素の下側に余白を追加します。ここでは「4」の数値が使われており、Bootstrapのスケールに従って、適度な余白が追加されます。
d-flex
「display: flex;」が要素に対して付与され、Flexboxレイアウトを適用するということになります。
flex-wrap
Flexboxの「wrap」プロパティを適用します。これにより、子要素がコンテナの幅を超えると、次の行に折り返されます。
justify-content-between
Flexboxの「justify-content」プロパティを「between」に設定します。これにより、子要素がコンテナの両端に配置され、間に均等な余白が生まれます。
card
Bootstrapのカードコンポーネントを適用します。カードは、画像、テキスト、リンクなどを含むことができる柔軟なコンテナです。
m-2
「margin」の略で、要素の周囲に余白を追加します。「2」はBootstrapのスケールに従い、適度な余白が設定されます。
p-1
「padding」の略で、要素の内側に余白を追加します。「1」はBootstrapのスケールに従い、少量の余白が設定されます。
card-img-top
カードの画像に適用され、画像をカードの上部に配置してくれます。
rounded
要素の角を丸めてくれます。
shadow-sm
要素に軽い影を追加してくれます。
card-body
カードの本文エリアを指定します。ここにテキストやその他の要素を配置できます。
text-body
テキストの色をデフォルトのボディカラーに設定します。
card-title
カードのタイトルを指定します。通常、h5などの見出しタグと組み合わせて使用します。
card-text
カード内のテキストに対して適切なスタイリングが行われます。

おわりに

新着商品用のレイアウトで最初の難関はflexを理解して、横並びにするところかな思っています。そこに対して少しでもアプローチできればとても嬉しいです。最後にですが、自分のブログでQiitaに記述するまでもない記事等々を投稿していますので見ていただけますと幸いです。