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

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

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

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

Ruby on Rails 5

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

解決済

railsで適用されるcssと適用されないcssがある

bane
bane

総合スコア0

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

Ruby on Rails 5

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

1回答

0評価

1クリップ

62閲覧

投稿2019/10/03 07:10

編集2022/01/12 10:58

rails5でviewsにhomeとlayoutsの2つのフォルダがある。
layoutsにはheader,footer,applicationのhtml.erbファイル
homeにはtop.html.erbがある。
stylesheetsファイルにはcustom.scssを置いてすべてのcssをそこに置きたい。
問題はlayoutsのhtmlにはcssが適用されhomeのtop.htmlにはcssが適用されない。
しかもtopにはh1タグとh2タグがありh1タグには適用されなくh2タグには適用される現状。
h2タグもclassを.main-container-top h2のようにすると適用されない。
わかりにくいとこが多くてすみません。

application.html.erb

html

<!DOCTYPE html> <html> <head> <title>Mysite</title> <%= csrf_meta_tags %> <%= csp_meta_tag %> <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %> <%= stylesheet_link_tag 'home', media: 'all', 'data-turbolinks-track': 'reload' %> <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %> </head> <body> <%= render 'layouts/header' %> <%= yield :main %> <%= render 'layouts/footer' %> </body> </html>

_header.html.erb

html

<header> <div class="container"> <div class="header-left"> <%= link_to("Darts Mark", "/") %> </div> </div> <div class="header-right"> <a href="#">ユーザー登録</a> </div> <div class="header-right1"> <a href="#">ログイン</a> </div> <div class="header-left1"> <%= link_to("Darts Markとは", "/about") %> <%= link_to("使い方", "/about") %> </div> </header>

top.html.erb

html

<%= content_for :main do %> <div class="main-container"> <div class="main-container-top"> <h1>Make A New Friends</h1> <h2>Be not afraid</h2> <%= link_to("募集", "/about") %> <%= link_to("みつける", "/about") %> <%= link_to("雑談", "/about") %> </div> </div> <% end %>

custom.scss

css

/* home */ .main-container { font-family: "Hiragino Kaku Gothic ProN"; background-image: url("/images/proxyclick-visitor-management-system-1631867-unsplash.jpg"); background-size:100%; width:100%; height:800px; color:#532532; }```

良い質問の評価を上げる

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

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

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

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

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

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

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

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

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

siruku6
siruku6

2019/10/03 15:31

scssファイルに書いても適用されない、まさにその効いていないcssコードも、質問文のコードに記載しておいた方が、何かしらのヒントになると思います。 layoutには適用されている、ということなので、それも一緒に書いておきましょう。
bane
bane

2019/10/03 16:21

ありがとうございます 追加しました。

まだ回答がついていません

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

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

ただいまの回答率
87.20%

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

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

質問する

関連した質問

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

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

Ruby on Rails 5

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