ヒーロー（ビッグイメージ）の実装

ヒーロー（ビッグイメージ）の実装

ヒーロー（ビッグイメージ）はサイトの中心、いわばサイトの顔です。Webサイトの一番大きな写真を挿入する部分のことを言います。この部分の言い方はたくさんあり、ビッグイメージやメインビジュアルと呼ばれる場合もあります。

このクオリティで見る人の印象は決まりますので、非常に重要な部分ですね。この項目では、ビッグイメージ実装の為のHTMLとCSSを学びます。また、トップページのみで表示出来るようにカスタマイズしていきます。

ヒーロー（ビッグイメージ）を作成

application.html.erbに以下を追加します。

<div class="jumbotron text-center hero">
  <div class="container">
     <h1>あなたのニュースを話し合おう！</h1>
     <p>Newsableはニュースを...</p>
     <%= link_to "いますぐサインアップする", 
      new_user_registration_path, class: "btn btn-primary" %>
  </div>
</div>

次にcssを作成します。home.scssを開いて以下を追加します。画像を設定して、余白を入れます。

.hero {
  background: image-url('top.jpg') center top; 
  background-size: cover;
  color: #fff;
} 

# 上下にもっとpaddingを入れる

.jumbotron {
  padding: 6rem 2rem;
}

書き終わったらブラウザで確認してみましょう。

困ったこと１

ビッグイメージのHTMLは、application.html.erbに書かれているのでブログやユーザー編集などの他のページでも、ビッグイメージが常に見えてしまいます。

トップページのみで表示するには、current_page?()メソッドを使用して表示中のページを判定し、表示を切り分けます。以下オレンジ部分を追加して下さい。表示中のページがトップページだったら、ビッグイメージを表示するとしています。

<% if current_page?(root_path) %>
   <div class="jumbotron text-center hero">
      <h1>あなたのニュースを話し合おう！</h1>
      <p>Newsableはニュースを議...</p>
      <%= link_to "いますぐサインアップする", ... %>
   </div>
<% end %>

困ったこと２

アーティクルや編集が真ん中寄せになっていない状態です。左寄せになっていますね。

これは、部分をcontainerでラップする事で解決できます。読み込まれるすべてのページが真ん中寄せになるのです。

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

課題

ビッグイメージを実装しましょう。その際にボタンの色を変更してみてください。

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

まとめ

この教程では、Bootstrapの使用したデザインの実装方法について学びました。Bootstrapとは、かんたんにWebデザイン（HTML/CSS）を作成できるTwitterが提供するライブラリーです。

Bootstrapにはグリッドシステムという、デバイスの画面を縦に12分割したグリッドに沿うようコンテンツを配置するレイアウト方法が用意されています。これを使用すると、レスポンシブデザインも簡単に実装できます。

そして、BootstrapのCSSクラスを使用したヘッダーやビッグイメージのデザインの実装を行いました。