フッターを作成する

フッターを作成する

では、フッターを作っていきましょう。まず、application.html.erbに以下を追加して下さい。

<div class="container content">
  <%= yield %>
</div>
<div class="footer">
   <div class="container">
      Newsable footer  
   </div>
</div>

次に、cssを変更します。style.scssに以下を追加して下さい。これは、BootstrapのCSSを上書きする形になります。

#scaffold? style.scss

.footer {
  background: #999;
  color: white;
  padding: 5rem 0;
}

表示部分にmin-height

現在の状態だと、コンテンツの少ない場合フッターが上の方に行ってしまいます。これは、コンテンツ表示部分にmin-heightを設定する事で解決できます。

# application.html.erb

<div class="container content">
   <%= yield  %>
</div>

# scaffold?style.scss

.content {
  min-height: 700px;
}

これで、画面最下部にフッターが固定されます。では、ブラウザで確認してみて下さい。以下のようにフッターが出来ているはずです。

課題

先程と同様にフッターを作成し、コンテンツ一覧リンクを表示しましょう。HTMLはリストタグを使用して、style.scssを編集して文字色は白にしましょう。

加も行いました。