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

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

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

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

SCSS

SCSSは、SassのCSSメタ言語です。Webページのスタイルを指定するCSSを効率的に記述することができます。ネストと呼ばれる入れ子構造で記述するため、CSSの全体の記述量を減らせる点が特徴です。さらに変数も利用できるため、変更や修正の際に少ない作業量で対応することもできます。

Ruby on Rails

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

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

881閲覧

RailsでSCSSが切り替わらない

suketyan25

総合スコア0

Ruby

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

SCSS

SCSSは、SassのCSSメタ言語です。Webページのスタイルを指定するCSSを効率的に記述することができます。ネストと呼ばれる入れ子構造で記述するため、CSSの全体の記述量を減らせる点が特徴です。さらに変数も利用できるため、変更や修正の際に少ない作業量で対応することもできます。

Ruby on Rails

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

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2021/07/27 05:42

前提・実現したいこと

Railsを使用して簡単な映画のレビューサイトを作成しています。レビューを投稿して際にデザインが変わるようにしたいです。

発生している問題・エラーメッセージ

レビューが投稿されているときのデザインとまだレビューが投稿されていないときのデザインを作成しました。まだレビューが投稿されていない映画に新しいレビューを投稿するとまだレビューが投稿されていないときのデザインが適応されてしまいます。

レビューがあるとき

イメージ説明

まだ投稿されていないとき

イメージ説明

###### 新しいreviewを投稿したとき
イメージ説明

該当のソースコード

scss

1 2.noreview { 3 margin-bottom: 1rem; 4 margin: 30px 10px 20px 10px; 5 text-align: center; 6 7} 8 9.flex{ 10 flex-wrap :wrap; 11 margin: 0 auto; 12 13 .img{ 14 text-align: center; 15 } 16 17 .item{ 18 th,.director{ 19 text-align: center; 20 } 21 } 22 23} 24 25table { 26 margin: 20px auto; 27} 28 29.review_table{ 30 border-collapse: separate; 31 border-spacing: 0px 10px; 32 33 td{ 34 word-break: break-all; 35 } 36 .star{ 37 width:200px; 38 } 39 .ope{ 40 padding: 0px 0px 15px 0px; 41 } 42} 43 44.tbl-r02{ 45 46 th { 47 background: deepskyblue; 48 width: 100px; 49 color: #fff; 50 padding: 10px; 51 } 52 td { 53 word-break:break-all; 54 padding: 10px; 55 } 56}

erb

1 2<div> 3 <div> 4 <h2 class="text-center"><%= @movie.name %></h2> 5 <div class='flex'> 6 <div class="img"> 7 <%= image_tag 'movieimage/image1.png' , :alt => @movie.image %> 8 </div> 9 <div class="item"> 10 <table class='tbl-r02'> 11 <tr> 12 <th>監督名</th> 13 <td class="director"><%= @movie.director %></td> 14 </tr> 15 <tr> 16 <th>あらすじ</th> 17 <td><%= @movie.story %>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa 18 aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa 19 aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa 20 </td> 21 </tr> 22 </table> 23 </div> 24 </div> 25 <br> 26 <hr> 27 <br> 28 <div> 29 <center><h3>レビュー一覧</h3></center> 30 <br> 31 <table class="review_table"> 32 <% if @movie.reviews.any? %> 33 <tbody> 34 <% @movie.reviews.each do |review| %> 35 <tr> 36 <th><%= review.name %></th> 37 <th class="star"> 38 <div id="star-rate-<%= review.id %>"></div> 39 <script> 40 $('#star-rate-<%= review.id %>').raty({ 41 size: 36, 42 starOff: '<%= asset_path('star-off.png') %>', 43 starOn : '<%= asset_path('star-on.png') %>', 44 readOnly: true, 45 score: <%= review.star %>, 46 }); 47 </script> 48 </th> 49 50 </tr> 51 <tr> 52 <td colspan="2"><%= review.coment %></td> 53 </tr> 54 <tr> 55 <td class="ope", colspan="2", align="right"> 56 [<%= link_to '編集(できない)', edit_movie_review_path(@movie, review) %>] 57 [<%= link_to '削除', movie_review_path(@movie,review), method: :delete, data:{confirm: 'Are you sure?'} %>] 58 </td> 59 </tr> 60 61 <% end %> 62 </tbody> 63 <% else %> 64 <p class="noreview">まだreviewはありません</p> 65 <% end %> 66 67 </table> 68 69 </div> 70 </div> 71 <hr> 72 <div> 73 <center><h3>レビューを投稿する</h3></center> 74 <br> 75 <%= form_with model: [@movie, @review], local: true do |f| %> 76 <%= f.hidden_field :movie_id, { value: @movie.id} %> 77 <div class="form-group row"> 78 <%= f.label :name, '名前 ', class:'col-md-2 col-form-label' %> 79 <div class="col-md-10"> 80 <%= f.text_field :name, class: 'form-control' ,placeholder:'山田 太郎'%> 81 </div> 82 </div> 83 <div class="form-group row"> 84 <%= f.label :coment, '内容 ', class:'col-md-2 col-form-label' %> 85 <div class="col-md-10"> 86 <%= f.text_area :coment, class: 'form-control' ,rows: "3", placeholder:'レビューを書いてください!'%> 87 </div> 88 </div> 89 <div class="form-group row" id="star"> 90 <%= f.label :star,'評価 ', class:'col-md-3 col-form-label' %> 91 <%= f.hidden_field :star, id: :review_star %> 92 </div> 93 <!-- 評価javascript --> 94 <script> 95 $('#star').raty({ 96 size : 30, 97 starOff: '<%= asset_path('star-off.png') %>', 98 starOn : '<%= asset_path('star-on.png') %>', 99 scoreName: 'review[star]', 100 }); 101 </script> 102 <div class="text-center"> 103 <%= f.submit "投稿する", class: 'btn btn-primary' %> 104 </div> 105 <% end %> 106 </div> 107 <div> 108 <h3><%= link_to '>Home',root_path %></h3> 109 </div> 110 111</div>

######controller

rb

1def create 2 @movie = Movie.find(params[:movie_id]) 3 @review = Review.new 4 if @review.update(review_params) 5 redirect_to movie_path(@movie), notice: 'Succsess!' 6 else 7 redirect_to movie_path(@movie), alert: 'Invalid!' 8 end 9 end

投稿を保存終了後リダイレクトでページを再読みこみして表示しています。

RailsやCSSの知識が浅くなぜこのようなことが起こったかわからないため、なぜこのようなことが起こっているのかも教えてもらえると幸いです。

補足情報(FW/ツールのバージョンなど)

Rails 5.2.6
ruby 2.6.3

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

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

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

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

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

maisumakun

2021/07/27 07:05 編集

> 新しいレビューを投稿するとまだレビューが投稿されていないときのデザインが適応されてしまいます。 具体的に、どの部分がどのように意図と違うのでしょうか?
suketyan25

2021/07/27 07:19

新しくレビューを投稿した際に1枚目の画像のようなレイアウトにしたいです。2枚目の画像みたいにレビューが投稿されていないときにレビューを投稿すると3枚目のレビュー一覧のようなデザインになってしまいます。
maisumakun

2021/07/27 07:26 編集

1枚めと3枚めで、どのような点が違うのでしょうか? (中身の分量の違いでレイアウトが違っただけ、ということはありませんか?)
suketyan25

2021/07/28 05:11 編集

おっしゃる通りでした。回答の分量が多ければ1枚目のようなデザインになりました。レビューがついたら1枚目のようなユーザー名と評価星の間に空白が入らず横長にならなかったためなぜCSSが適応されないんだろうと思っていました。全然CSS等の知識不足でした!ありがとうございました!!
guest

回答1

0

自己解決

ちゃんとCSS機能していました。自分の知識不足でした。お勉強してきます。。。。

投稿2021/07/28 06:54

suketyan25

総合スコア0

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.35%

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

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

質問する

関連した質問