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

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

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

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

Ruby

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

Q&A

解決済

1回答

2668閲覧

Rails 開発環境で一部のCSSしか反映されない。Railsチュートリアル

taka2477

総合スコア8

Ruby on Rails 5

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

Ruby

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

0グッド

0クリップ

投稿2018/08/29 06:56

編集2018/08/29 13:54

前提・実現したいこと

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

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

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

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

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

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

guest

回答1

0

自己解決

helpers/users_helper.rbのimage_tag(gravatar_url, alt: user.name, class: "gravatar")のクラスのあとで画像のサイズ指定を50にしてから、CSSを適用させたら上手くいきました。

投稿2018/08/29 13:54

taka2477

総合スコア8

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.49%

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

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

質問する

関連した質問