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

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

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

Rubyはプログラミング言語のひとつで、オープンソース、オブジェクト指向のプログラミング開発に対応しています。

Ruby on Rails 4

Ruby on Rails4はRubyによって書かれたオープンソースのウェブフレームワークです。 Ruby on Railsは「設定より規約」の原則に従っており、効率的に作業を行うために再開発を行う必要をなくしてくれます。

Bootstrap

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

Q&A

2回答

3317閲覧

Ruby on RailsでBootstrapがブラウザに反映しない

honsan

総合スコア6

Ruby

Rubyはプログラミング言語のひとつで、オープンソース、オブジェクト指向のプログラミング開発に対応しています。

Ruby on Rails 4

Ruby on Rails4はRubyによって書かれたオープンソースのウェブフレームワークです。 Ruby on Railsは「設定より規約」の原則に従っており、効率的に作業を行うために再開発を行う必要をなくしてくれます。

Bootstrap

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

0グッド

0クリップ

投稿2016/02/04 06:23

編集2022/01/12 10:55

##概要
初心者です。ruby on rails チュートリアルを学習しているのですが5.1.2に記されている通り,app/assets/stylesheets/ディレクトリに新しくsassファイルを作成しBootstrapとbootstrap-sprocketsをインクルードしたのですがブラウザにbootstrapのデザインが反映されません。調べましたが私の実力ではわからなかったので教えてください。

具体的には以下の通りです。

####開発環境

  • ruby 2.2.1
  • rails 4.2.2
  • cloud9

###手順

  1. Gemfileへgem 'bootstrap-sassを追加

  2. $bundle install

  3. app/assets/stylesheets/に新規ファイルを作成

$ touch app/assets/stylesheets/custom.css.scss

  1. 3で作成したcustom.css.scssファイルにbootstrap cssを追加

lang

1@import "bootstrap-sprockets"; 2@import "bootstrap";

最後にローカルサーバーを起動し、ブラウザで表示しましたが1~4の手順を踏む前と変化がありませんでした。

ちなみに試しにcustom.css.scssファイルの内容をそのままapplication.cssに追加し.scss拡張子を加えたところbootstrapが反映されました。
以下が変更を加えたapplication.css.scssファイル

lang

1/* 2 * This is a manifest file that'll be compiled into application.css, which 3 * will include all the files listed below. 4 * 5 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, 6 * vendor/assets/stylesheets, or vendor/assets/stylesheets of plugins, if any, 7 * can be referenced here using a relative path. 8 * 9 * You're free to add application-wide styles to this file and they'll appear 10 * at the bottom of the compiled file so the styles you add here take 11 * precedence over styles defined in any styles defined in the other CSS/SCSS 12 * files in this directory. It is generally better to create a new file per 13 * style scope. 14 * 15 *= require_tree . 16 *= require_self 17 *= require custom 18*/ 19@import "bootstrap-sprockets"; 20@import "bootstrap"; 21 22 23/* universal */ 24 25body { 26 padding-top: 60px; 27} 28 29section { 30 overflow: auto; 31} 32 33textarea { 34 resize: vertical; 35} 36 37.center { 38 text-align: center; 39} 40 41.center h1 { 42 margin-bottom: 10px; 43}

####その他関連ファイル
app/assets/stylesheets/application.css

lang

1/* 2 * This is a manifest file that'll be compiled into application.css, which 3 * will include all the files listed below. 4 * 5 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, 6 * vendor/assets/stylesheets, or vendor/assets/stylesheets of plugins, if any, 7 * can be referenced here using a relative path. 8 * 9 * You're free to add application-wide styles to this file and they'll appear 10 * at the bottom of the compiled file so the styles you add here take 11 * precedence over styles defined in any styles defined in the other CSS/SCSS 12 * files in this directory. It is generally better to create a new file per 13 * style scope. 14 * 15 *= require_tree . 16 *= require_self 17 *= require custom 18*/

app/views/layouts/application.html.erb

lang

1<!DOCTYPE html> 2<html> 3 <head> 4 <title><%= full_title(yield(:title)) %></title> 5 <%= stylesheet_link_tag 'application', media: 'all', 6 'data-turbolinks-track' => true %> 7 <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %> 8 <%= csrf_meta_tags %> 9 <!--[if lt IE 9]> 10 <script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/r29/html5.min.js"> 11 </script> 12 <![endif]--> 13 </head> 14 <body> 15 <header class="navbar navbar-fixed-top navbar-inverse"> 16 <div class="container"> 17 <%= link_to "sample app", '#', id: "logo" %> 18 <nav> 19 <ul class="nav navbar-nav navbar-right"> 20 <li><%= link_to "Home", '#' %></li> 21 <li><%= link_to "Help", '#' %></li> 22 <li><%= link_to "Log in", '#' %></li> 23 </ul> 24 </nav> 25 </div> 26 </header> 27 <div class="container"> 28 <%= yield %> 29 </div> 30 </body> 31</html>

app/views/static_pages/home.html.erb(表示するページ)

lang

1<div class="center jumbotron"> 2 <h1>Welcome to the Sample App</h1> 3 4 <h2> 5 This is the home page for the 6 <a href="http://www.railstutorial.org/">Ruby on Rails Tutorial</a> 7 sample application. 8 </h2> 9 10 <%= link_to "Sign up now!", '#', class: "btn btn-lg btn-primary" %> 11</div> 12 13<%= link_to image_tag("rails.png", alt: "Rails logo"), 14 'http://rubyonrails.org/' %>

宜しくお願いします。

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

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

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

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

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

guest

回答2

0

SASSの方のマニフェスト記述は不要なのではないかと思います。

投稿2016/02/04 12:51

rossi46hiro

総合スコア992

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

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

0

= require customの記述、およびcustom.css.scssの/ ~ */が必要ないものと思われます。

【application.css】

/*

  • 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, vendor/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 styles
  • defined in the other CSS/SCSS files in this directory. It is generally better to create a new
  • file per style scope.

*= require_tree .
*= require_self
*/

【custom.css.scss】

@import "bootstrap-sprockets";
@import "bootstrap";

/* mixins, variables, etc. */

$gray-medium-light: #eaeaea;

@mixin box_sizing {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}

/* universal */

body {
padding-top: 60px;
}

投稿2016/03/14 11:00

KazuhiroHigashi

総合スコア10

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

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

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

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問