Q&A
scssファイルに書いても適用されない、まさにその効いていないcssコードも、質問文のコードに記載しておいた方が、何かしらのヒントになると思います。
layoutには適用されている、ということなので、それも一緒に書いておきましょう。
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}
回答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
総合スコア1382
コメントありがとうございます。
まさにその通りでした。ほんとに悩んでました。ご回答ありがとうございました！
テキストエディタで、全角を表示するための拡張がある場合は導入しておきましょう。
他のファイルも、全角スペースが紛れ込んでいるとそれを識別できずに挙動がおかしくなることがあるため。
sublime text と VSCode は少なくとも全角スペースを認識するための拡張が用意されています。
ATOMやEclipse、Emacsなども相当有名なエディタなので、全角を表示する程度の拡張は用意されているのではないかと思います。
大変勉強になりました！
（o_ _)ｏ））
あなたの回答
tips
プレビュー
