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

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

ただいまの
回答率

88.06%

Railsのscssが反映されない

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 2,726

score 47

Ruby on Railsを利用してメディアの作成をしています。
現在デザインを実装しようと思ってます。

共通のscssにcssを記述しているのですが、font-sizeしか反映されず困っています。

@import "bootstrap-sprockets";
@import "bootstrap";
@import "font-awesome";
@import "md_simple_editor";

body {
    background-color:white;
    padding-top: 10px;
    padding-left: 50px;
}

.shibuya{
  font-size:30px;
  color:#6f5f39;
  font-weight:bold;
  text-decoration-line: none;
  font-family: "メイリオ", Meiryo;
}

.shibuya:hover {
  opacity: 0.8;
}

.topof{
    margin-left:580px;
}

.log {
    font-size:10px;
    color:orange;
}


/*
 * 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 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 jquery-ui/autocomplete
 *= require jquery.tagit
 *= require tagit.ui-zendesk
 *= require_self
 */
<!DOCTYPE html>
<html>
  <head>
    <title>Sweets Maphia</title>
    <%= csrf_meta_tags %>

    <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= include_gon %>
    <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
  </head>


  <dl class="searchbox">
    <%= search_form_for @search, url: articles_path do |f| %>
        <dt><%= f.text_field :title_or_content_cont ,placeholder: '検索するテキストを入力...' %></dt>
        <dd><%= f.submit ('検索') , class: 'search-btn'%></dd>
    <% end %>
  </dl>
  <body>
  <%= image_tag 'swm.png',:class => 'topof' %>
  <div class="menu">
    <div class="shibuya">
      <%= link_to 'SHIBUYA',partial: 'tag_list', tags: Article.tagged_with('渋谷')%>
    </div>

    <div class="omote">
      <%= link_to 'OMOTE-SANDOH',partial: 'tag_list',tags: Article.tagged_with('表参道')%>
    </div>

    <div class="aoyama">
      <%=link_to 'AOYAMA', partial: 'tag_list',tags: Article.tagged_with('青山')%>
    </div>

    <div class="yokohama">
      <%= link_to 'YOKOHAMA',partial: 'tag_list',tags: Article.tagged_with('横浜')%>
    </div>

    <div class="others">
      <%=link_to 'OTHERS',partial: 'tag_list',tags: Article.tagged_with('その他')%>
    </div>
  </div>
  <p class="notice"><%= notice %></p>
  <p class="alert"><%= alert %></p>
    <%= yield %>
  </body>
</html>

個人的には先に導入したBootstrapが原因かなと思い、Bootstrapを外すことも試みたのですがうまくいかず断念しました。わかる方いらっしゃいましたらよろしくお願いします。

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 1

check解決した方法

0

Bootstrapが原因ではありませんでした。
Bootstrapを無効にする方法は、application.jsとapplication.scssのbootstrapに関する記述を削除した後に、Gemfileから gem bootstrap-sassを削除します。

最後にgem uninstall bootstrap-sassを行います。この後エラーが出る場合は、Gemfile.lockを削除後にbundleを行います。

これでBootstrapを無効にすることができます。

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

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

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

関連した質問

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