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

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

ただいまの
回答率

90.76%

  • Ruby on Rails

    6745questions

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

  • CSS

    5331questions

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

cssがうまく適用されません

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 130

dossy

score 7

CSSがうまく適用されません。

CSSがうまく適用されないので、もう1つアプリを作成しまし他のですが、後に作った方は上手く動きました。

全く同じ、処理を行いましたが、前に作ったアプリはCSSが適用されていないという状態になりました。
(この後、どちらにもコピペしましたが、後の方は動きますが、前に作ったものはうまく動きませんでした。)
何故でしょう?全く原因がわかりませんでした。

いじったところ
stylesheet 
application.css
setting.scss
style.scss
tweets.css.scss

Application.html.erb

以上を(相互に)コピペしてみたのですが、
前に作った方はうまく動きませんでした。
以下は、application.css

  /*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
 * or any plugin's vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any styles
 * defined in the other CSS/SCSS files in this directory. It is generally better to create a new
 * file per style scope.
 *
 *= require_tree .
 *= require_self
 */

おそらく、CSSの問題なのでapplicationが怪しいと思うのですが原因が全く分かりません。
失敗作 画像
イメージ説明

成功作 画像
イメージ説明

追記
application.html.erb

<!DOCTYPE html>
<html>
  <head>
    <title>Pictweet</title>
    <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
    <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
    <%= csrf_meta_tags %>
    <script type="text/javascript">
      WebFontConfig = {
        google: { families: [ 'Unica+One::latin' ] }
      };
      (function() {
        var wf = document.createElement('script');
        wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
          '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
        wf.type = 'text/javascript';
        wf.async = 'true';
        var s = document.getElementsByTagName('script')[0];
        s.parentNode.insertBefore(wf, s);
      })();
    </script>
  </head>

  <body>
    <header class="header">
      <div class="header__bar row">
        <h1 class="grid-6"><a href="/">Pic</a></h1>
        <% if user_signed_in? %>
        <div class="user_nav grid-6">
          <%= link_to "ログアウト",destroy_user_session_path,method: :delete %>
          <a class="post" href="/tweets/new">投稿する</a>
        </div>
        <% else %>
        <div class="grid-6">
          <%= link_to "ログイン",new_user_session_path, class: 'post'%>
          <%= link_to "新規登録",new_user_registration_path,class: 'post'%>
        </div>
        <% end %>
      </div>
    </header>

    <%= yield %>

    <footer>
      <p>
        Copyright PicTweet 2014.
      </p>
    </footer>
  </body>
</html>

ディレクトリ構造
イメージ説明

一応、ブラウザのキャッシュは削除してみましたが治りませんでした。

ページを検証しても、

<div class="content_post" style="background-image: url(https://cdn.pixabay.com/photo/2018/05/30/00/24/thunderstorm-3440450_960_720.jpg);">
        <p>sasaas</p>
        <span class="name">kokok</span>
      </div>


特に問題はなさそうに見えました。

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • dossy

    2018/06/07 12:05

    検証したら、```<div class="content_post" style="background-image: url(https://cdn.pixabay.com/photo/2018/05/30/00/24/thunderstorm-3440450_960_720.jpg);&quot;&gt; <p>sasaas</p> <span class="name">kokok</span> </div>``` のようになっており、特に問題はなさそうなのですが。

    キャンセル

  • SurferOnWww

    2018/06/07 12:33 編集

    Fiddler などのキャプチャツールを使って、目的の外部 CSS ファイルが読み込まれているか調べてみましょう(もちろんブラウザのキャッシュをすべて削除した後で)。IE の F12 開発者ツールなどで、着目している html 要素に期待通りスタイルが適用されているか、されてないとすると何が不足か、どの CSS ファイルのものかを調べてみましょう。それで解決のためのヒントが見つかるかもしれません。

    キャンセル

  • yoshinavi

    2018/06/07 13:00

    「失敗作」の方でも画像の一部が表示されているので、画像の読込は問題ないと思います。スタイルが適用されていないので、やはりCSSが上手く読み込まれていないのでは?と考えられますので、開発者ツール等で再度検証してみてください。

    キャンセル

回答 1

check解決した方法

0

解決しました。

おそらく、application.html.erbが
application.html .erbになっていたことが原因ではないかと思われます。
(ディレクトリ構造のlayouts-application.htm で切れていましたね...)
超初歩的な所でしたが、皆さんのコメント有難うございます。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/06/07 13:37

    スペルミス・・・焦れば焦るほど「見落とす」箇所ですからね。

    解決されて何よりです。
    (^^)

    キャンセル

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

  • ただいまの回答率 90.76%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • Ruby on Rails

    6745questions

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

  • CSS

    5331questions

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