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

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

新規登録して質問してみよう
ただいま回答率
85.48%
Ruby on Rails 5

Ruby on Rails 5は、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

Q&A

1回答

1617閲覧

railsにbootstrapを適用させたい

nozawataira

総合スコア6

Ruby on Rails 5

Ruby on Rails 5は、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

0グッド

0クリップ

投稿2017/11/24 08:50

編集2017/11/24 08:53

###前提・実現したいこと
railsにbootstrapを適用させたいです。

###発生している問題・エラーメッセージ
エラーは出ていないのですが、bootstrapが適用されていない形でページが表示されます。
イメージ説明

###該当のソースコード

Gemfile

1Gemfile 2 3source 'https://rubygems.org' 4 5git_source(:github) do |repo_name| 6 repo_name = "#{repo_name}/#{repo_name}" unless repo_name.include?("/") 7 "https://github.com/#{repo_name}.git" 8end 9 10 11# Bundle edge Rails instead: gem 'rails', github: 'rails/rails' 12gem 'rails', '~> 5.1.4' 13# Use sqlite3 as the database for Active Record 14gem 'sqlite3' 15# Use Puma as the app server 16gem 'puma', '~> 3.7' 17# Use SCSS for stylesheets 18gem 'sass-rails', '~> 5.0' 19# Use Uglifier as compressor for JavaScript assets 20gem 'uglifier', '>= 1.3.0' 21# See https://github.com/rails/execjs#readme for more supported runtimes 22# gem 'therubyracer', platforms: :ruby 23 24# Use CoffeeScript for .coffee assets and views 25gem 'coffee-rails', '~> 4.2' 26# Turbolinks makes navigating your web application faster. Read more: https://github.com/turbolinks/turbolinks 27gem 'turbolinks', '~> 5' 28# Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder 29gem 'jbuilder', '~> 2.5' 30# Use Redis adapter to run Action Cable in production 31# gem 'redis', '~> 3.0' 32# Use ActiveModel has_secure_password 33# gem 'bcrypt', '~> 3.1.7' 34 35# Use Capistrano for deployment 36# gem 'capistrano-rails', group: :development 37 38group :development, :test do 39 # Call 'byebug' anywhere in the code to stop execution and get a debugger console 40 gem 'byebug', platforms: [:mri, :mingw, :x64_mingw] 41 # Adds support for Capybara system testing and selenium driver 42 gem 'capybara', '~> 2.13' 43 gem 'selenium-webdriver' 44end 45 46group :development do 47 # Access an IRB console on exception pages or by using <%= console %> anywhere in the code. 48 gem 'web-console', '>= 3.3.0' 49 gem 'listen', '>= 3.0.5', '< 3.2' 50 # Spring speeds up development by keeping your application running in the background. Read more: https://github.com/rails/spring 51 gem 'spring' 52 gem 'spring-watcher-listen', '~> 2.0.0' 53end 54 55# Windows does not include zoneinfo files, so bundle the tzinfo-data gem 56gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby] 57 58gem 'wdm', '>= 0.1.0' 59gem 'bcrypt-ruby', '3.1.1.rc1', :require => 'bcrypt' 60 61#gem 'bootstrap-sass' 62#gem 'sass-rails' 63 64#gem 'bootstrap-sass' 65 66 67 68 69#gem 'sass-rails', '3.2' 70 71#gem install jquery-rails # Rails5移行必ず導入する 72#gem install jquery-ui-rails # 上と同様 73 74 75#gem 'jquery-rails' 76#gem 'jquery-ui-rails' 77#gem 'jquery-rails' 78#gem 'popper' 79#gem 'slim-rails' 80 81#gem 'bootstrap-sass' 82#gem 'jquery-rails' 83#gem 'tether-rails' 84 85#gem 'bootstrap-sass', '~> 3.3.6' 86#gem 'autoprefixer-rails' 87#gem 'nodejs-rails' 88 89gem 'bootstrap-sass' 90gem 'jquery-rails' 91 92

Gemfile.lock

1GEM 2 remote: https://rubygems.org/ 3 specs: 4 actioncable (5.1.4) 5 actionpack (= 5.1.4) 6 nio4r (~> 2.0) 7 websocket-driver (~> 0.6.1) 8 actionmailer (5.1.4) 9 actionpack (= 5.1.4) 10 actionview (= 5.1.4) 11 activejob (= 5.1.4) 12 mail (~> 2.5, >= 2.5.4) 13 rails-dom-testing (~> 2.0) 14 actionpack (5.1.4) 15 actionview (= 5.1.4) 16 activesupport (= 5.1.4) 17 rack (~> 2.0) 18 rack-test (>= 0.6.3) 19 rails-dom-testing (~> 2.0) 20 rails-html-sanitizer (~> 1.0, >= 1.0.2) 21 actionview (5.1.4) 22 activesupport (= 5.1.4) 23 builder (~> 3.1) 24 erubi (~> 1.4) 25 rails-dom-testing (~> 2.0) 26 rails-html-sanitizer (~> 1.0, >= 1.0.3) 27 activejob (5.1.4) 28 activesupport (= 5.1.4) 29 globalid (>= 0.3.6) 30 activemodel (5.1.4) 31 activesupport (= 5.1.4) 32 activerecord (5.1.4) 33 activemodel (= 5.1.4) 34 activesupport (= 5.1.4) 35 arel (~> 8.0) 36 activesupport (5.1.4) 37 concurrent-ruby (~> 1.0, >= 1.0.2) 38 i18n (~> 0.7) 39 minitest (~> 5.1) 40 tzinfo (~> 1.1) 41 addressable (2.5.2) 42 public_suffix (>= 2.0.2, < 4.0) 43 arel (8.0.0) 44 autoprefixer-rails (7.1.6) 45 execjs 46 bcrypt-ruby (3.1.1.rc1) 47 bindex (0.5.0) 48 bootstrap-sass (3.3.7) 49 autoprefixer-rails (>= 5.2.1) 50 sass (>= 3.3.4) 51 builder (3.2.3) 52 byebug (9.1.0) 53 capybara (2.16.1) 54 addressable 55 mini_mime (>= 0.1.3) 56 nokogiri (>= 1.3.3) 57 rack (>= 1.0.0) 58 rack-test (>= 0.5.4) 59 xpath (~> 2.0) 60 childprocess (0.8.0) 61 ffi (~> 1.0, >= 1.0.11) 62 coffee-rails (4.2.2) 63 coffee-script (>= 2.2.0) 64 railties (>= 4.0.0) 65 coffee-script (2.4.1) 66 coffee-script-source 67 execjs 68 coffee-script-source (1.12.2) 69 concurrent-ruby (1.0.5) 70 crass (1.0.3) 71 erubi (1.7.0) 72 execjs (2.7.0) 73 ffi (1.9.18) 74 ffi (1.9.18-x64-mingw32) 75 globalid (0.4.1) 76 activesupport (>= 4.2.0) 77 i18n (0.9.1) 78 concurrent-ruby (~> 1.0) 79 jbuilder (2.7.0) 80 activesupport (>= 4.2.0) 81 multi_json (>= 1.2) 82 jquery-rails (4.3.1) 83 rails-dom-testing (>= 1, < 3) 84 railties (>= 4.2.0) 85 thor (>= 0.14, < 2.0) 86 listen (3.1.5) 87 rb-fsevent (~> 0.9, >= 0.9.4) 88 rb-inotify (~> 0.9, >= 0.9.7) 89 ruby_dep (~> 1.2) 90 loofah (2.1.1) 91 crass (~> 1.0.2) 92 nokogiri (>= 1.5.9) 93 mail (2.7.0) 94 mini_mime (>= 0.1.1) 95 method_source (0.9.0) 96 mini_mime (1.0.0) 97 mini_portile2 (2.3.0) 98 minitest (5.10.3) 99 multi_json (1.12.2) 100 nio4r (2.1.0) 101 nokogiri (1.8.1) 102 mini_portile2 (~> 2.3.0) 103 nokogiri (1.8.1-x64-mingw32) 104 mini_portile2 (~> 2.3.0) 105 public_suffix (3.0.1) 106 puma (3.11.0) 107 rack (2.0.3) 108 rack-test (0.8.2) 109 rack (>= 1.0, < 3) 110 rails (5.1.4) 111 actioncable (= 5.1.4) 112 actionmailer (= 5.1.4) 113 actionpack (= 5.1.4) 114 actionview (= 5.1.4) 115 activejob (= 5.1.4) 116 activemodel (= 5.1.4) 117 activerecord (= 5.1.4) 118 activesupport (= 5.1.4) 119 bundler (>= 1.3.0) 120 railties (= 5.1.4) 121 sprockets-rails (>= 2.0.0) 122 rails-dom-testing (2.0.3) 123 activesupport (>= 4.2.0) 124 nokogiri (>= 1.6) 125 rails-html-sanitizer (1.0.3) 126 loofah (~> 2.0) 127 railties (5.1.4) 128 actionpack (= 5.1.4) 129 activesupport (= 5.1.4) 130 method_source 131 rake (>= 0.8.7) 132 thor (>= 0.18.1, < 2.0) 133 rake (12.3.0) 134 rb-fsevent (0.10.2) 135 rb-inotify (0.9.10) 136 ffi (>= 0.5.0, < 2) 137 ruby_dep (1.5.0) 138 rubyzip (1.2.1) 139 sass (3.5.3) 140 sass-listen (~> 4.0.0) 141 sass-listen (4.0.0) 142 rb-fsevent (~> 0.9, >= 0.9.4) 143 rb-inotify (~> 0.9, >= 0.9.7) 144 sass-rails (5.0.7) 145 railties (>= 4.0.0, < 6) 146 sass (~> 3.1) 147 sprockets (>= 2.8, < 4.0) 148 sprockets-rails (>= 2.0, < 4.0) 149 tilt (>= 1.1, < 3) 150 selenium-webdriver (3.7.0) 151 childprocess (~> 0.5) 152 rubyzip (~> 1.0) 153 spring (2.0.2) 154 activesupport (>= 4.2) 155 spring-watcher-listen (2.0.1) 156 listen (>= 2.7, < 4.0) 157 spring (>= 1.2, < 3.0) 158 sprockets (3.7.1) 159 concurrent-ruby (~> 1.0) 160 rack (> 1, < 3) 161 sprockets-rails (3.2.1) 162 actionpack (>= 4.0) 163 activesupport (>= 4.0) 164 sprockets (>= 3.0.0) 165 sqlite3 (1.3.13) 166 sqlite3 (1.3.13-x64-mingw32) 167 thor (0.20.0) 168 thread_safe (0.3.6) 169 tilt (2.0.8) 170 turbolinks (5.0.1) 171 turbolinks-source (~> 5) 172 turbolinks-source (5.0.3) 173 tzinfo (1.2.4) 174 thread_safe (~> 0.1) 175 tzinfo-data (1.2017.3) 176 tzinfo (>= 1.0.0) 177 uglifier (3.2.0) 178 execjs (>= 0.3.0, < 3) 179 wdm (0.1.1) 180 web-console (3.5.1) 181 actionview (>= 5.0) 182 activemodel (>= 5.0) 183 bindex (>= 0.4.0) 184 railties (>= 5.0) 185 websocket-driver (0.6.5) 186 websocket-extensions (>= 0.1.0) 187 websocket-extensions (0.1.3) 188 xpath (2.1.0) 189 nokogiri (~> 1.3) 190 191PLATFORMS 192 ruby 193 x64-mingw32 194 195DEPENDENCIES 196 bcrypt-ruby (= 3.1.1.rc1) 197 bootstrap-sass 198 byebug 199 capybara (~> 2.13) 200 coffee-rails (~> 4.2) 201 jbuilder (~> 2.5) 202 jquery-rails 203 listen (>= 3.0.5, < 3.2) 204 puma (~> 3.7) 205 rails (~> 5.1.4) 206 sass-rails (~> 5.0) 207 selenium-webdriver 208 spring 209 spring-watcher-listen (~> 2.0.0) 210 sqlite3 211 turbolinks (~> 5) 212 tzinfo-data 213 uglifier (>= 1.3.0) 214 wdm (>= 0.1.0) 215 web-console (>= 3.3.0) 216 217BUNDLED WITH 218 1.16.0.pre.2 219

application.scss

1@import "bootstrap-sprockets"; 2@import "bootstrap"; 3// @import "home.scss"; 4// @import "posts.scss"; 5// @import "users.scss"; 6// @import "board.scss"; 7

application.js

1// This is a manifest file that'll be compiled into application.js, which will include all the files 2// listed below. 3// 4// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, or any plugin's 5// vendor/assets/javascripts directory can be referenced here using a relative path. 6// 7// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the 8// compiled file. JavaScript code in this file should be added after the last require_* statement. 9// 10// Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details 11// about supported directives. 12//= require jquery 13//= require bootstrap-sprockets 14//= require rails-ujs 15//= require turbolinks 16//= require_tree .

###試したこと
様々なサイトに載っているパターンを試しましたがうまくいきませんでした。
###補足情報(言語/FW/ツール等のバージョンなど)
Gemfileはコメントになっている部分がたくさんあるので見にくいと思いますがよろしくお願いします。様々な角度からどうすればいいのか指摘してもらえたら幸いです。

気になる質問をクリップする

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

bundle install したときに、ターミナル上にエラー出ずにインストールされましたか?
もしエラーが出ていたら、まずはエラーメッセージを読んでみてください。

投稿2017/11/24 11:00

退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

nozawataira

2017/11/25 00:20

エラーは出ていなかったと思います^^;
退会済みユーザー

退会済みユーザー

2017/11/25 03:26

環境の要因(とくにWindowsで多いらしい)でgemが動かないことがたまにあるようなので、原因切り分けのため以下2つを試してみてください。 (1)同じ環境の中で、いまのRailsプロジェクトとは別にRails newしてみて同じ問題が起きるか (2)VirtualBox+Linux環境を構築してその上にRuby、Railsをインストールして同じことが起きるか(またCloud9環境ではどうか) 断定はできませんが(1)で同じ問題が起きて(2)では起きない場合は、環境要因の可能性が高いです。 バージョン問題の可能性もあるのでなるべく同じバージョンにしてみてください。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問