CSSのカラーがHtmlに反映されない。初心者です。

```
コード

htmlの勉強を始めたばかりです。
1
2atomを使っていまして、CSSの内容をhtmlに反映させたいのですが、反映されません。
3
4基礎的なことがよくわかっていないのですが、
5CSSファイルはhtmlと同じように「新規ウインドウ」から作成で合っているのでしょうか。または、ファイル名など作成方法が間違っているのかもしれませんが、ご指摘いただきたく、よろしくお願いします。
6
7●css-study.htmlファイル
8<!DOCTYPE html>
9<html lang ="ja-jp ">
10  <head>
11      <meta charset = "UTF-8">
12      <title> CSSとは</title>
13      <link rel = "stylesheet" href = "css-study.css">
14    </head>
15    <body>
16      <p> class = "blue">青い文字</p>
17      <p> class = "red">赤い文字</p>
18    </body>
19  </html>
20●css-study.cssファイル
21@charset "utf-8";
22
23p.blue {
24    color: blue;
25}
26p.red {
27    color: red;
28}

退会済みユーザー

2021/05/13 04:39

cssやhtmlをどうやってテストしていますか？

MeiriMichuan

2021/05/13 04:43

atomでパッケージ→Markdownプレビュー→プレビューの切り替えで右側にプレビューが表示されていますので、 Ctrl＋Sで反映されるものかと認識しています。

m.ts10806

2021/05/13 04:44

コードはマークダウンのcode機能にてご提示ください。一部きいてないのか全部きいてないのか、例えば背景色や文字サイズなど見てすぐ分かるような指定をbodyにしたらどうなるかなど、確認を。あと、それぞれのファイルの位置関係はどうなってますか？過去質問は何一つ参考になりませんか？CSSが反映されない要因はそんな多岐にわたりません。

K_3578

2021/05/13 04:59

初心者ってことはなんかしら見ながら勉強してると思うけど、 class = "blue">青い文字 class = "red">赤い文字 ↑みたいなのを勘違いでなく実際に記載されたとしたらとんでもない事だけど

MeiriMichuan

2021/05/13 05:07

青い文字 赤い文字 に修正しましたがこういうことでしょうか..？動画サイトを見ながらやっています。ご指摘いただいたように今ほかの質問や背景色などの変更をして確認しています。

m.ts10806

2021/05/13 05:13

質問は編集できますので。「現在どういう表示になっているか」画面キャプチャも提示されるとなおよしです。ひとめでわかります。

K_3578

2021/05/13 05:16

その動画サイトで前述の通り書いてたとしたらその動画は相当信用ないっすね。

K_3578

2021/05/13 05:27

コードはコードブロック化してください。下記質問の回答を見れば書き方は分かると思います。 https://teratail.com/questions/238564 因みに連続してコードブロックを作るときはブロック間で1行以上スペースを空けてやらないと合体した一つのブロックと判定されるので気をつけて下さい。画像とかはブロック外じゃないと表示されません。

m.ts10806

2021/05/13 05:28

回答がついた質問の改変は慎重に。「存在していない内容」に対する回答になってしまっています。「回答を受けた結果」として本文追記されたほうが良いです。あとマークダウン分からなければヘルプページなり過去質問を参考にしてください。

dit.

2021/05/13 05:34

作成したhtmlファイルをダブルクリックするなどして、ブラウザ（EdgeやGoogleChromeなど）で開いた場合にはどうなりますか？そもそも「Markdownプレビュー」は使用用途が違うと思います。

K_3578

2021/05/13 05:42 編集

「atom-html-preview」ってパッケージがあったはず。確か標準機能のMarkDownプレビューは表示が異なるような

mutsuki22

2021/05/13 06:17 編集

これは解決出来てないのでまだ助言が欲しいって認識で合ってますか？

行動規範の内容に同意します

回答4件

HTML
1<p> class = "blue">青い文字</p>
2```↓
3```HTML
4<p class="blue">青い文字</p>

投稿2021/05/13 04:45

kei344

総合スコア69606

パっと思い当たる事は2つあります。

1.記載方法が違います。

html
1<!DOCTYPE html>
2<html lang ="ja-jp ">
3<head>
4<meta charset = "UTF-8">
5<title> CSSとは</title>
6<link rel = "stylesheet" href = "css-study.css">
7</head>
8<body>
9<p class="blue">青い文字</p> ←＜＞内の書き方修正
10<p class="red">赤い文字</p>←＜＞内の書き方修正
11</body>
12</html>