前提・実現したいこと
Railsチュートリアル13章をやっており、開発環境におけるCSSが一部しか読み込まれません。例えば.content
(下記ソースコード参照)など一部は読み込まれますが、画像のように他のCSSは正常に読み込まれないです。原因は何が考えられるでしょうか?お力添えいただけると幸いです。
該当のソースコード
assets/stylesheets/custom.scss
/* microposts */ .microposts { list-style: none; padding: 0; li { padding: 10px 0; border-top: 1px solid #e8e8e8; } .user { margin-top: 5em; padding-top: 0; } .content { display: block; margin-left: 60px; img { display: block; padding: 5px 0; } } .timestamp { color: $gray-light; display: block; margin-left: 60px; } .gravatar { float: left; margin-right: 10px; margin-top: 5px; } } aside { textarea { height: 100px; margin-bottom: 5px; } } span.picture { margin-top: 10px; input { border: 0; } }
config/environments/development.rb
Rails.application.configure do config.web_console.whitelisted_ips = '*********' config.cache_classes = false config.eager_load = false config.consider_all_requests_local = true if Rails.root.join('tmp/caching-dev.txt').exist? config.action_controller.perform_caching = true config.cache_store = :memory_store config.public_file_server.headers = { 'Cache-Control' => "public, max-age=#{2.days.seconds.to_i}" } else config.action_controller.perform_caching = false config.cache_store = :null_store end config.action_mailer.raise_delivery_errors = true config.action_mailer.delivery_method = :test host = '**************.vfs.cloud9.us-east-2.amazonaws.com' config.action_mailer.default_url_options = { host: host, protocol: 'https' } config.action_mailer.perform_caching = false config.active_support.deprecation = :log config.active_record.migration_error = :page_load config.assets.debug = true config.assets.quiet = true config.file_watcher = ActiveSupport::EventedFileUpdateChecker end
views/users/show.html.erb
<% provide(:title, @user.name) %> <div class="row"> <aside class="col-md-4"> <section class="user_info"> <h1> <%= gravatar_for @user %> <%= @user.name %> </h1> </section> </aside> <div class="col-md-8"> <% if @user.microposts.any? %> <h3>Microposts (<%= @user.microposts.count %>)</h3> <ol class="microposts"> <%= render @microposts %> </ol> <%= will_paginate @microposts %> <% end %> </div> </div>
views/microposts/_micropost.html.erb
<li id="micropost-<%= micropost.id %>"> <%= link_to gravatar_for(micropost.user, size: 50), micropost.user %> <span class="user"><%= link_to micropost.user.name, micropost.user %></span> <span class="content"><%= micropost.content %></span> <span class="timestamp"> Posted <%= time_ago_in_words(micropost.created_at) %> ago. </span> </li>
helpers/users_helper.rb
module UsersHelper #引数で与えられたユーザーのGravatar画像を返す def gravatar_for(user, size: 80) gravatar_id = Digest::MD5::hexdigest(user.email.downcase) size = url_options[:size] gravatar_url = "https://secure.gravatar.com/avatar/#{gravatar_id}?s=#{size}" image_tag(gravatar_url, alt: user.name, class: "gravatar") end end
試したこと
サーバー再起動
/* microposts */内の他のCSSの反映具合
追記
どうもcustom.scss内の.gravatarが怪しい?float: left;は適用されましたが、margin-right: 10px;
margin-top: 5px;
も一緒に記入すると、またおかしくなってしまいます。。。
追記2
helpers/users_helper.rbのimage_tag(gravatar_url, alt: user.name, class: "gravatar")
のクラスのあとで画像のサイズ指定を50にしてから、CSSを適用させたら上手くいきました。
補足情報(FW/ツールのバージョンなど)
Rails 5.1.4
AWS クラウド9
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。