Ruby好き非エンジニアのブログ

〜Ruby on Railsの学習記録〜

Bootstrap(Jambotron/ジャンボトロン)で画面いっぱいに画像を表示させる方法

今回はJambotronの使用例のメモ。

※Jambotron(ジャンボトロン)とは、画面いっぱいに画像等を表示させるためのBootstrapのcomponentsの中の一つです。

サンプルはこんな感じ。
f:id:Jyoko:20170128222939g:plain



それでは、あくまでも一例ですが、使用の流れを書いていきます。
※Bootstrapの使用環境が整っていること前提で進めます。


まずは検索エンジンで「jumbotron bootstrap」と検索。

下記サイトをクリック。
f:id:Jyoko:20170128223322g:plain

上記サンプル画面のすぐ下にソースコードが書いてあるので、まずは全てコピーし、適当なページ(nabvarが記載されているページ等)にペースト。

<div class="jumbotron">
  <h1 class="display-3">Hello, world!</h1>
    <p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
  <hr class="my-4">
    <p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
    <p class="lead">
      <a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
    </p>
</div>

上記コードはサンプル画面そのままなので、下記のように不要な部分を削除します。

<div class="jumbotron">
  <h1 class="display-3">Hello, world!</h1>
</div>

そしてこのコード内にヘッダーやナビゲーションのコードを追加。

<div class="jumbotron">
  <h1 class="display-3">Hello, world!</h1>
  <header class="navbar navbar-fixed-top navbar" >
  <div class="container">
    <%= link_to "Jammies", root_path, id: "logo" %>
    <nav>
      <ul class="nav navbar-nav navbar-right">
        <li><%= link_to "Jammiesホーム", root_path %></li>
        <li><%= link_to "使い方", '#' %></li>
        <li><%= link_to "お知らせ", '#' %></li>
      <% if logged_in? %>
        <li><%= link_to "マイページ", current_user %></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">
            アカウント <b class="caret"></b>
          </a>
          <ul class="dropdown-menu">
            <li><%= link_to "アカウント情報", current_user %></li>
            <li><%= link_to "プロフィールの編集", edit_user_path(current_user) %></li>
            <li class="divider"></li>
            <li>
              <%= link_to "ログアウト", logout_path, method: "delete" %>
            </li>
          </ul>
        </li>
      <% else %>
        <li><%= link_to "会員登録", signup_path %></li>
        <li><%= link_to "ログイン", login_path %></li>
      <% end %>
      </ul>
     </nav>
   </div>
 </header>
</div>


(変更前)
f:id:Jyoko:20170128225814g:plain

(変更後)
f:id:Jyoko:20170128230215g:plain


次はapp/assets/imagesに好きな画像(今回は1920×1214のサイズの画像を使用)を入れ、
app/assets/stylesheets/application.scss等、レイアウトを記述しているページにて先ほど入れた画像を呼び出します。

.jumbotron {
	padding-top: 0px;
	background: url(scene1920.jpg);
	background-size: cover;
	background-position: 50% 50%;
	height: 400px;
}

できあがったイメージはこんな感じになります。
f:id:Jyoko:20170128233054g:plain

その他header/navbar等含めたレイアウトはお好みで調整してください。

それでは今日はこの辺で。

参照:
Jumbotron · Bootstrap