質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

87.77%

railsでbootstapのジャンボトロンを背景画像にしたい。

受付中

回答 1

投稿 編集

  • 評価
  • クリップ 1
  • VIEW 1,863

score 39

現在簡単な、CRUD処理のアプリを作成し、練習をしています。
bootstrapを適用させるところまではできました。
そこでジャンボトロンを使って画像を表示させたくググって調べているのですが、解決できずかなり時間が経過してしまいました。

imdex.html.erbか、asset~で保管?するのような情報も目にしましたが、画像イメージはどこで編集してあげればいいかがわからないです。
"プリコンパイル"は"アセットパイプライン"を使っています。

一緒にみてもらえないでしょうか。

以下が現在の出力結果とエディタの内容です。
イメージ説明説明](88b095505b48284b37716cc507ade102.png)

index.html.erb

<div class="jumbotron jumbotron-fluid">
  <div class="container">
    <h1>書籍一覧</h1>
    <%= link_to '新規登録',new_book_path, class: "btn-sm btn-primary" %>
  </div>
</div>
<table class="table table-striped">
  <thead>
    <tr class="table-info">
      <th scope="col">登録されたid番号</th>
      <th scope="col">タイトル</th>
      <th scope="col">テキスト</th>
      <th scope="col">詳細</th>
      <th scope="col">編集</th>
      <th scope="col">削除</th>
      <th colspan="3"></th>
    </tr>
  </thead>

  <tbody>
    <% @books.each do |book| %>
    <tr>
        <td><%= link_to book.id, book_path(book) %></td>
        <td><%= book.title %></td>
        <td><%= book.text %></td>
        <td><%= link_to '表示',book_path(book), class: "btn-sm btn-success" %></td>
        <td><%= link_to '編集',edit_book_path(book), class: "btn-sm btn-secondary" %></td>
        <td><%= link_to '削除',book_path(book),
          method: :delete, class: "btn-sm btn-danger",
          data: {confirm: '本当に削除してもいいですか?'} %>
        </td>
    </tr>
    <% end %>
  </tbody>
</table>

Gemfile

source 'https://rubygems.org'
git_source(:github) { |repo| "https://github.com/#{repo}.git" }

ruby '2.5.1'

# Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
gem 'rails', '~> 5.2.2'
# Use sqlite3 as the database for Active Record
gem 'sqlite3'
# Use Puma as the app server
gem 'puma', '~> 3.11'
# Use SCSS for stylesheets
gem 'sass-rails', '~> 5.0'
# Use Uglifier as compressor for JavaScript assets
gem 'uglifier', '>= 1.3.0'
# See https://github.com/rails/execjs#readme for more supported runtimes
# gem 'mini_racer', platforms: :ruby

# Use CoffeeScript for .coffee assets and views
gem 'coffee-rails', '~> 4.2'
# Turbolinks makes navigating your web application faster. Read more: https://github.com/turbolinks/turbolinks
gem 'turbolinks', '~> 5'
# Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder
gem 'jbuilder', '~> 2.5'
# Use Redis adapter to run Action Cable in production
# gem 'redis', '~> 4.0'
# Use ActiveModel has_secure_password
# gem 'bcrypt', '~> 3.1.7'

# Use ActiveStorage variant
# gem 'mini_magick', '~> 4.8'

# Use Capistrano for deployment
# gem 'capistrano-rails', group: :development

# Reduces boot times through caching; required in config/boot.rb
gem 'bootsnap', '>= 1.1.0', require: false

group :development, :test do
  # Call 'byebug' anywhere in the code to stop execution and get a debugger console
  gem 'byebug', platforms: [:mri, :mingw, :x64_mingw]
end

group :development do
  # Access an interactive console on exception pages or by calling 'console' anywhere in the code.
  gem 'web-console', '>= 3.3.0'
  gem 'listen', '>= 3.0.5', '< 3.2'
  # Spring speeds up development by keeping your application running in the background. Read more: https://github.com/rails/spring
  gem 'spring'
  gem 'spring-watcher-listen', '~> 2.0.0'
end

group :test do
  # Adds support for Capybara system testing and selenium driver
  gem 'capybara', '>= 2.15'
  gem 'selenium-webdriver'
  # Easy installation and use of chromedriver to run system tests with Chrome
  gem 'chromedriver-helper'
end

# Windows does not include zoneinfo files, so bundle the tzinfo-data gem
gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby]

gem 'bootstrap', '~> 4.2.1'
gem 'jquery-rails'

application.scss

/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *
 *= require_tree .
 *= require_self
 */
@import "bootstrap";

books.scss

// Place all the styles related to the books controller here.
// They will automatically be included in application.css.
// You can use Sass (SCSS) here: http://sass-lang.com/

welcome.scss

// Place all the styles related to the welcome controller here.
// They will automatically be included in application.css.
// You can use Sass (SCSS) here: http://sass-lang.com/

imageに追加した内容,jpg

application.scss

/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *
 *= require_tree .
 *= require_self
 */
@import "bootstrap";
.jumbotron {
  background-image: image-url("栄養画像参考.jpg");
  background-size: cover;
}

サーバーで表示されたメッセージ

イメージ説明

eiyou.jpgに変更後

イメージ説明

route.rb

Rails.application.routes.draw do
  get 'welcome/index'
  # For details on the DSL available within this file, see http://guides.rubyonrails.org/routing.html
  resources :books
  root 'welcome#index'
end

books_controller.rb

class BooksController < ApplicationController#to do index アクションを作る

  def index
    @books = Book.all
  end

  def show
    @book = Book.find(params[:id])
  end

  def new
    @book = Book.new
  end

  def edit
    @book = Book.find(params[:id])
  end

  def create
    @book = Book.new(book_params)
    if @book.save
      redirect_to @book
    else
      render :new
    end
  end

  def update
      @book = Book.find(params[:id])
      if @book.update(book_params)
        redirect_to @book
      else
        render :edit
      end
  end

  def destroy
    @book = Book.find(params[:id])
    @book.destroy!
    redirect_to books_path
  end



private
  def book_params
    params.require(:book).permit(:title, :text)
  end
end
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • CHERRY

    2019/01/17 13:03

    CSSは、どうなっていますか?

    キャンセル

  • -maeji-

    2019/01/17 13:13

    >CSSは、どうなっていますか?

    すいません、cssはこの場合、stylesheets/以下〜のファイルで良いのでしょうか。
    application.scss、books.scss、、we、welcome.scssを追記編集を編集しました。

    キャンセル

回答 1

+1

HTML に指定しただけでは、枠しか作られませんので CSS で background-image を指定する必要があります。

app/assets/images に画像を入れます。( 例: title.jpg )

app/assets/stylesheets/application.scss に こんな感じで...

.jumbotron {
  background-image: image-url("title.jpg");
  background-size: cover;
}

必要に応じて、サイズや位置を調整してください。


(追記)

ん〜。
どこが違うのかなぁ...

回答した時点では、机上の空論(つまり未テスト)だったので見落としでもあるのかと思って実際に試してみました。

--- 

$ rails new test1app

$ cd test1app

$ vi Gemfile

gem 'bootstrap', '~> 4.2.1'
gem 'jquery-rails'


を追加。

$ bundle install 

$ rails generate controller Home index

$ vi config/routes.rb に root :to => 'home#index' を追加。

$ vi app/views/home/index.html.erb 

<div class="jumbotron jumbotron-fluid">
  <div class="container">
    <h1>テスト</h1>
  </div>
</div>

$ mv app/assets/stylesheets/application.css app/assets/stylesheets/application.scss 

$ vi app/assets/stylesheets/application.scss 

@import "bootstrap";

.jumbotron {
  background-image: image-url("test1.jpg");
  background-size: cover;
}


を追加

app/assets/images/ ディレクトリ に test1.jpg を追加

rails s で起動して、 Web ブラウザで http://localhost:3000/ にアクセスするとエラーなく背景画像付きで表示可能です。

Webブラウザでアクセスした際に rails を起動したターミナルには、下記のようなアクセスログが出ました。

$ rails s

=> Booting Puma
=> Rails 5.2.2 application starting in development
=> Run `rails server -h` for more startup options
Puma starting in single mode...
* Version 3.12.0 (ruby 2.4.3-p205), codename: Llamas in Pajamas
* Min threads: 5, max threads: 5
* Environment: development
* Listening on tcp://0.0.0.0:3000
Use Ctrl-C to stop

Started GET "/" for 127.0.0.1 at 2019-01-17 18:06:55 +0900
Processing by HomeController#index as HTML
  Rendering home/index.html.erb within layouts/application
  Rendered home/index.html.erb within layouts/application (1.2ms)
Completed 200 OK in 371ms (Views: 361.4ms | ActiveRecord: 0.0ms)

生成された application.css ( /assets/application.self-a6f77e9cc86f76867156c3f0a4c8b4696fdd76fe11b1f26347ca9eda80e4577e.js?body=1 )は、こんな感じでした。

(上側略)
/* line 19, app/assets/stylesheets/application.scss */
.jumbotron {
  background-image: url(/assets/test1-c88f5524ff80a80a25f2b9793579b7db6ded58d7218bb11e1c089ed379ebb6bc.jpg);
  background-size: cover;
}

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/01/17 16:29

    引き続いての回答、誠にありがとうございます。

    今、rails sで出力し直し、再読み込みをして、ターミナルを確認しましたところ、
    ```
    Started GET "/images/eiyou.jpg" for 127.0.0.1 at 2019-01-17 16:22:17 +0900

    ActionController::RoutingError (No route matches [GET] "/images/eiyou.jpg"):
    ```
    このような記述が確認できました。
    ルートとアクションが紐づいていない、ルートファイルに何か記載際ないと行けなかったのでしょうか。

    キャンセル

  • 2019/01/17 18:12

    今、新規 rails アプリを作って回答した内容だけを追加して試してみましたが、普通に表示できるようです。

    既存のアプリに組み込まれているみたいなので、route が競合しているとか何かあるのかもしれません。

    キャンセル

  • 2019/01/17 19:19

    お忙しい中、わざわざありがとうございます。

    恥ずかしい話ですが、routeは動画教材を真似て編集したのですが、welcomeなんとかという部分はなんでwelcomeってなっているのか私自身もよくわかってないですが、resourcesもありますしこちらが原因なのでしょうか...

    finderの方で保存されたデータ、画像名が感じのままだったので修正してみたのですが、これも変化なしです。
    もう少し頑張ってみます...

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 87.77%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る