指定したクラス要素ではなくbody要素が反映されてしまう。

Question

前提・実現したいこと

プライバシーポリシーの記載されたページを、幅全体のうち80％を表示範囲として文章を表示させたい。
しかし現時点でscssの記述が反映されない。

railsを、SCSSを編集しています。
SCCSファイルは二個あります、一つは「①application.scss」もう一つは「②static_page.scss」です。
各クラスの要素やプロパティのコードは「②static_page.scss」にあります。
前者「①application.scss」は下記のような記述になっています。

/*
 * 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, 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 other CSS/SCSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *
 */

 @import "font-awesome";
 @import "static_page";

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

クラスで80％幅で中央に表示するよう指定しているのですが要素が反映されず、画面横幅いっぱいになって折り返す仕様になってしまいます。
※パスについては、htmlファイルのhead部分で「②static_page.scss」へのリンクについて記載があり、さらにプライバシーポリシーのページ以外のプロパティは反映されているので通っていると思うのですが…。

検証で見てみましたが、あるはずの指定クラスの表記がなく、どうやらbody要素が反映されているようです。

該当のソースコード

<div class="privacy">
    <h1>プライバシーポリシー</h1>
    <p>株式会社AAA（以下，「当社」といいます。）は，本ウェブサイト上で提供するサービス（以下,「本サービス」といいます。）における，ユーザーの個人情報の取扱いについて，以下のとおりプライバシーポリシー（以下，「本ポリシー」といいます。）を定めます。</p>

    <h2>第1条（個人情報）</h2>
    <p>「個人情報」とは，個人情報保護法にいう「個人情報」を指すものとし，生存する個人に関する情報であって，当該情報に含まれる氏名，生年月日，住所，電話番号，連絡先その他の記述等により特定の個人を識別できる情報及び容貌，指紋，声紋にかかるデータ，及び健康保険証の保険者番号などの当該情報単体から特定の個人を識別できる情報（個人識別情報）を指します。</p>

 <h2>第3条（個人情報を収集・利用する目的）</h2>
    <p>当社が個人情報を収集・利用する目的は，以下のとおりです。</p>
    <ol>
    <li>当社サービスの提供・運営のため</li>
    <li>ユーザーからのお問い合わせに回答するため（本人確認を行うことを含む）</li>
    <li>ユーザーが利用中のサービスの新機能，更新情報，キャンペーン等及び当社が提供する他のサービスの案内のメールを送付するため</li>
    <li>メンテナンス，重要なお知らせなど必要に応じたご連絡のため</li>
    <li>利用規約に違反したユーザーや，不正・不当な目的でサービスを利用しようとするユーザーの特定をし，ご利用をお断りするため</li>
    <li>ユーザーにご自身の登録情報の閲覧や変更，削除，ご利用状況の閲覧を行っていただくため</li>
    <li>有料サービスにおいて，ユーザーに利用料金を請求するため</li>
    <li>上記の利用目的に付随する目的</li>
    </ol>

/*　中略　*/　

 </div>    

    <p class="tr">以上</p>

/* privacy */

.privacy{
  width: 80%;
  margin: 0px auto;
}

.tr {
  text-align: right;
}

試したこと

px指定にしたり、マージンを個別に指定したりしてみましたが変化ありませんでした。
検証でelement.style {}へ直接入力するとうまくいくのですが実際ファイルに追加すると反映されません。

完成イメージ

Answer 1

原因:CSSが読み込めてない（おそらく）
→パスをご確認ください。

Comments

[ayako_sato]

ありがとうございます。
質問時の情報不足、すみません。
本件railsで作られるWEBページとなっており、その一部となります。

元々私が組んだCSSを他の方にrailsで表示できるように変更してもらったもので、やりたいことやどうしたいかは分かっているのですが、scssへ変換されたりrails仕様の書き方について理解不足のためこのような質問の仕方になってしまいました。

パスの通りを確認しようといろいろ調べたのですが、
application.html.erb内にページ全体のレイアウトのようなものがあり、そこのhead部分に
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
の記載があります。パスはこれで通っているのかな…と思うのですが反映されないということは通っていないわけで、でも他のページのクラスなどは反映されているのでただただ混乱しております…。

他に確認する場所などはありますでしょうか…。

Answer 2

CSS が読み込めていないのではないでしょうか？

• HTML に該当 CSS を読み込むコードが有るか確認してみてください
• Devtool の Network タブでCSSを読み込んでいるか、エラーが出てないか確認してみてください

Comments

[ayako_sato]

ありがとうございます。
詳細方法まで書いてくださり、本当に感謝です。

本件、後ほど本質問に追記させていただくのですが、今回はrailsを使ってのWEB表示となっておりまして、上記のページはその中の1ページでしかなく、ほかのページはきちんと反映されている状態なのです。

ご教授いただきましたHTMLのCSS読み込みコードなのですが、application.html.erb内にページ全体のレイアウトのようなものがあり、そこのhead部分に
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
の記載があるため、おそらくこれで通っているのではないかと思いながら、実際は反映されていないので途方に暮れています…。

＞Devtool の Network タブでCSSを読み込んでいるか
読み込んでいませんでした。やはりパスの問題ですよね…。

＞エラーが出てないか確認してみてください
これといったエラー表示はありませんでした。

Answer 3

本件、アドバイスいただきました皆様本当にありがとうございました。

解決法として記載するのもお恥ずかしいくらいの根本的なミスで、今回の対象ページとは関係のないページのSCSS記述の中に「　｝」が一つ不足していたことにより反映されなかったようです。
不要なところに「　｝」があったため（結果的に帳尻があったせいか）エラーも出ず、まさかそんな初歩的なことは間違えていないだろうと思い込んでのトラブルでした。お騒がせいたしました。

何をしても解決できなかったので、気分転換にSCSSのインデント揃えでもしようとおもい手を付けたところ、あるべき場所に「　｝」がないのに気づき、追加したところ見事に解決となりました。

何時間もハマってしまうと見ているようで見ておらず、自分ではなかなか見つけられないこともあるなと思いました。