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

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

ただいまの
回答率

90.47%

  • Ruby on Rails

    7479questions

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

  • CSS

    5997questions

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

  • Linux

    3897questions

    Linuxは、Unixをベースにして開発されたオペレーティングシステムです。日本では「リナックス」と呼ばれています。 主にWebサーバやDNSサーバ、イントラネットなどのサーバ用OSとして利用されています。 上位500のスーパーコンピュータの90%以上はLinuxを使用しています。 携帯端末用のプラットフォームAndroidは、Linuxカーネル上に構築されています。

  • Ruby on Rails 4

    2455questions

    Ruby on Rails4はRubyによって書かれたオープンソースのウェブフレームワークです。 Ruby on Railsは「設定より規約」の原則に従っており、効率的に作業を行うために再開発を行う必要をなくしてくれます。

railsでのスタイルシートの追加の仕方

受付中

回答 2

投稿

  • 評価
  • クリップ 0
  • VIEW 1,945

newura

score 2

前提・実現したいこと

railsにてアプリケーションを作成し、
rails generate controller welcome index
にてコントローラーを追加しました。
その後、下記のcssを追加したのですが、反映がされない状態です。
app/assets/stylesheets/welcome_add.css

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

現状htmlにはかれているソースは
<link rel="stylesheet" media="all" href="/stylesheets/application.css" data-turbolinks-track="true" />
で、本来は
<link rel="stylesheet" media="all" href="/assets/application.self-e80e8f2318043e8af94dddc2adad5a4f09739a8ebb323b3ab31cd71d45fd9113.css?body=1" data-turbolinks-track="true" />
のようなhrefになって欲しいです。

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

Rails 4.2.6

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 2

0

app/assets/stylesheets/application.css

「 *= require_tree .」を追加してあげると反映されるかと思います。

app/assets/stylesheetsディレクトリ (サブディレクトリを含む) 中のすべてのCSSファイルが、アプリケーションCSSに含まれるようにします。

(参考)Railsチュートリアル

/*
 * 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 vendor/assets/stylesheets of plugins, if any,
 * 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
 */

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2016/04/10 23:32

    ご回答どうもありがとうございます。
    application.css
    の中身に関してはご教示いただいたようになっていそうなのですが、、
    何か間違いがあればご指摘いただきたいです。。

    cat app/assets/stylesheets/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
    */
    ```

    キャンセル

  • 2016/04/10 23:39

    そうですか・・・application.cssはあっている気がします。

    welcome_add.css
    の中身はほんとうに反映されていないですか?
    welcome_add.css
    の中身を全部コメントアウトして、なにかひとつだけ記述して
    反映されないかチェックいただけますでしょうか。

    キャンセル

  • 2016/04/11 00:11 編集

    ご回答どうもありがとうございます。
    welcome_add.cssの中身を下記のようにしてブラウザから確認しましたが、やはり反映されておりませんでした。
    cat app/assets/stylesheets/welcome_add.css
    ```
    #footer address {
    font-style: normal;
    text-align: center;
    line-height: 140%; /* 行の高さ */
    }
    ```
    ただ、cssのlinkタグが
    `href="/stylesheets/application.css"`
    のような形から
    `href="/assets/application-80512baa1...`
    のような形に変わったように見えます。
    現状そのリンク先に飛ぶと、railsのエラー画面で
    `The page you were looking for doesn't exist.`
    と表示されている状態となります。

    キャンセル

  • 2016/04/11 00:21

    #footer address {
    font-style: normal;
    text-align: center;
    line-height: 140%; /* 行の高さ */
    }
    ↑これはapplication.cssに直接書いても反映されますか?
    普通footerはIDにしない気がするので「♯」はつかない気がするのですが、viewファイルを見ないとなんとも分からないです…。

    キャンセル

  • 2016/04/17 10:32

    ご返答が遅れてしまい申し訳ございません。ご回答どうもありがとうございました。
    こちら、nginxとユニコーンの部分の挙動も不安定で、手順に不備があった可能性もありそうなので、一旦サーバーの環境構築からやりなおしてみます。
    アドバイスどうもありがとうございました。

    キャンセル

0

すでに読み込まれているcssファイル、例えばapplication.cssに何かcssを追加した時、そのcssは反映されますでしょうか?

Railsはアセットパイプラインで複数のcssファイルを連結して、一つのファイルとして出力します。
もしも反映されていないなら、アセットパイプラインがうまく作動しておらず、cssファイルが出力されていないのかと思います。

rake assets:precompile をしてみても改善されないでしょうか。
5分でわかる!? アセットパイプライン

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

関連した質問

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

  • Ruby on Rails

    7479questions

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

  • CSS

    5997questions

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

  • Linux

    3897questions

    Linuxは、Unixをベースにして開発されたオペレーティングシステムです。日本では「リナックス」と呼ばれています。 主にWebサーバやDNSサーバ、イントラネットなどのサーバ用OSとして利用されています。 上位500のスーパーコンピュータの90%以上はLinuxを使用しています。 携帯端末用のプラットフォームAndroidは、Linuxカーネル上に構築されています。

  • Ruby on Rails 4

    2455questions

    Ruby on Rails4はRubyによって書かれたオープンソースのウェブフレームワークです。 Ruby on Railsは「設定より規約」の原則に従っており、効率的に作業を行うために再開発を行う必要をなくしてくれます。