-
- 1. カード部分を実装する
- 2. フッターを作成する
- 3. クリップ詳細ページ
- 4. アラートをもっと見やすく
カード部分を実装する
カード部分を実装する
トップのデザインについて
以下のようなカード型のレイアウトを実現します。最新のクリップ８件をカードデザインを使って表示します。
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などを使用して現状のカードをもっときれいにしましょう。
無料ビデオ講座のお知らせ
Skillhub [スキルハブ]では無料の動画講座を多数公開しています。他校だと数万円するような講座が無料で受講できます。
