【Rails応用講座 9】デザイン2 >
カード部分を実装する

カード部分を実装する

トップのデザインについて

以下のようなカード型のレイアウトを実現します。最新のクリップ8件をカードデザインを使って表示します。

homeの編集

では、home_controllerを開いてデザインの準備をしていきましょう。クリップの中から最新のものを8件取得する為のコードを書きます。limitメソッドは取得件数を制限したいときに使用するものです。orderは並び順を指定できます。

# home_controller.rb

def index
  @clips = Clip.limit(8).order(created_at: :desc)
  # descは降順。大きい方から並べること
  # 例)5, 4, 3, 2, 1
  # 日付は新しいものほど大きい
end

次に、home/index.html.erbを編集します。今まで書いてあったコードは全て消して、以下のようなクリップのループを作成して下さい。

# index.html.erb

<% @clips.each do |clip| %>
   <%= image_tag clip.image if clip.image %>
   <%= link_to clip.title, clip %>
   <%= clip.description %>
<% end %>

カードの編集

Bootstrapのカードで表示を変更していきます。カードについては以下の公式サイトページで説明されています。

https://getbootstrap.com/docs/4.1/components/card/

では、Bootstrapを適用してみます。以下オレンジ部分を追加して下さい。

コードは以下になります。

# index.html.erb 
<div class="row">
  <% @clips.each do |clip| %>
    <div class="col-md-3">
      <div class="card">
        <%= image_tag clip.image, class: 'card-img-top' %>
        <%= link_to clip.title, clip %>
        <%= clip.description %>
      </div>
    </div>
  <% end %>
</div>

課題

Bootstrapサイトのカードを見ながら、card-body, card-titleなどを使用して現状のカードをもっときれいにしましょう。

https://getbootstrap.com/docs/4.1/components/card/

無料ビデオ講座のお知らせ

Skillhub [スキルハブ]では無料の動画講座を多数公開しています。他校だと数万円するような講座が無料で受講できます。

無料講座一覧を見る