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

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

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

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

Ruby on Rails 5

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

Q&A

解決済

1回答

925閲覧

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

bane

総合スコア14

CSS3

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

Ruby on Rails 5

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

0グッド

1クリップ

投稿2019/10/03 07:10

編集2019/10/03 16:20

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のようにすると適用されない。
わかりにくいとこが多くてすみません。

yieldの部分が適用されていないのがわからないです。

application.html.erb

html

1<!DOCTYPE html> 2<html> 3 <head> 4 <title>Mysite</title> 5 <%= csrf_meta_tags %> 6 <%= csp_meta_tag %> 7 8 9 <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %> 10 <%= stylesheet_link_tag 'home', media: 'all', 'data-turbolinks-track': 'reload' %> 11 12 13 <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %> 14 </head> 15 16 <body> 17 <%= render 'layouts/header' %> 18 <%= yield :main %> 19 <%= render 'layouts/footer' %> 20 </body> 21</html> 22

_header.html.erb

html

1<header> 2 <div class="container"> 3 <div class="header-left"> 4 <%= link_to("Darts Mark", "/") %> 5 </div> 6 </div> 7 <div class="header-right"> 8 <a href="#">ユーザー登録</a> 9 </div> 10 <div class="header-right1"> 11 <a href="#">ログイン</a> 12 </div> 13 <div class="header-left1"> 14 <%= link_to("Darts Markとは", "/about") %> 15 <%= link_to("使い方", "/about") %> 16 </div> 17</header>

top.html.erb

html

1<%= content_for :main do %> 2<div class="main-container"> 3 <div class="main-container-top"> 4 5 <h1>Make A New Friends</h1> 6 <h2>Be not afraid</h2> 7 8 <%= link_to("募集", "/about") %> 9 <%= link_to("みつける", "/about") %> 10 <%= link_to("雑談", "/about") %> 11 </div> 12</div> 13 14<% end %>

適用されているcustom.scss

scss

1/* header */ 2body { 3 margin: 0; 4 5} 6 7a { 8 text-decoration: none; 9} 10 11.container-footer { 12 width: 1170px; 13 padding: 0 15px; 14 margin: 0 auto; 15 color:white; 16 17} 18 19header { 20 height: 65px; 21 width: 100%; 22 background-color:black; 23 /* positionプロパティをfixedに、topを0に指定してください */ 24 position:fixed; 25 top:0; 26 z-index:10; 27 28} 29 30.header-left { 31 float: left; 32 33 34} 35.header-left a{ 36 color:white; 37 line-height: 65px; 38 font-size: 30px; 39} 40 41.header-left1 a{ 42 line-height: 75px; 43 font-size: 15px; 44 color:#FFF; 45 padding:0 10px; 46} 47 48 49.header-right { 50 float: right; 51 background-color: rgba(255, 255, 255, 0.3); 52 transition: all 0.5s; 53} 54.left1{ 55 font-size: 15px; 56} 57 58.header-right1 a{ 59 float: right; 60 color:white; 61 line-height: 65px; 62 padding: 0 25px; 63 font-size: 20px; 64 65} 66.header-right:hover { 67 background-color: rgba(255, 255, 255, 0.5); 68} 69 70.header-right a { 71 line-height: 65px; 72 padding: 0 25px; 73 color: white; 74 font-size: 25px; 75} 76a:hover { 77 color:#6666FF ; 78} 79 80.bosyu h2{ 81 padding:100px 0; 82 font-size:30px; 83} 84

適用されないcustom.scss

scss

1/* home */ 2.main-container { 3 font-family: "Hiragino Kaku Gothic ProN"; 4 background-image: url("/images/proxyclick-visitor-management-system-1631867-unsplash.jpg"); 5 background-size:100%; 6 width:100%; 7 height:800px; 8 color:#532532; 9} 10.main-container-top h2{ 11 font-size: 30px; 12}

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

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

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

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

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

siruku6

2019/10/03 15:31

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

2019/10/03 16:21

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

回答1

0

ベストアンサー

提示していただいたコードは、実際のソースを丸々コピーしたものでしょうか?

見て何となく違和感を覚えたのですが、

css

1/* home */ 2.main-container { 3 ... 4} 5.main-container-top h2{ 6 ... 7}

上記二つのブロックに全角スペースが埋め込まれているのですが、これは実際には半角スペースだったのでしょうか?
もし本当に全角スペースがあるのだとしたら、そのせいでこのCSSが適用されていない可能性はあるかもしれません。

.main-containerの右と.main-container-topの右の2箇所に、少なくとも全角スペースがあるようです。
他にもあれば全部取り除いてみましょう。

投稿2019/10/04 11:34

siruku6

総合スコア1382

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

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

bane

2019/10/04 16:26

コメントありがとうございます。 まさにその通りでした。ほんとに悩んでました。ご回答ありがとうございました!
siruku6

2019/10/05 04:26

テキストエディタで、全角を表示するための拡張がある場合は導入しておきましょう。 他のファイルも、全角スペースが紛れ込んでいるとそれを識別できずに挙動がおかしくなることがあるため。 sublime text と VSCode は少なくとも全角スペースを認識するための拡張が用意されています。 ATOMやEclipse、Emacsなども相当有名なエディタなので、全角を表示する程度の拡張は用意されているのではないかと思います。
bane

2019/10/05 06:14

大変勉強になりました!
siruku6

2019/10/05 06:15

(o_ _)o))
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問