[初心者]Atomについて　cssが反映されません。

前提・実現したいこと

htmlにCSSを反映させたいです。

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

AtomとGoogleChromeでホームページを作りたいのですが、stylesheetのcssを反映のできません。間違ってるところを教えてください。
エラーメッセージ

htmlはこちらです。
<!doctype html>

<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" type="text/css" href="stylesheet.css1">
  </head>
  <body>
    <div class="header">
      <h1 class="header-logo"></h1>
      <ul class="header-list">
        <li><a href="#"></a></li>
        <li><a href="#"></a></li>
        <li><a href="#"></a></li>
      </ul>
    </div>
    <div class="main">

    </div>
    <div class="footer">
      <<h4></h4>
    </div>
  </body>
</html>

CSSはこちらです。
.header {
  color: red;
}

### 該当のソースコード

```ここに言語名を入力
ソースコード

試したこと

ここに問題に対して試したことを記載してください。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

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

回答1件

拡張子が「css1」になっています。

HTML
1<link rel="stylesheet" type="text/css" href="stylesheet.css1">

を

HTML
1<link rel="stylesheet" type="text/css" href="stylesheet.css">

にしてみてください。

投稿2020/04/22 04:55

編集2020/04/22 04:56

new1ro

総合スコア4528

kassy1

2020/04/22 05:28

変化しませんでした。

new1ro

2020/04/22 06:17

htmlファイルと、 cssファイルは同じフォルダ内にありますか? cssファイルが「css」フォルダにある、などフォルダの階層が違う場合 <link rel="stylesheet" type="text/css" href="css/stylesheet.css"> などになります。 ---- あと、 CSSの中身について試しに、例えば以下などわかりやすい指定をしてみてください。 body { background: #f00; }

kassy1

2020/04/22 08:08

フォルダは同じものでした。 bodyで試しましたが変化がありませんでした。 htmlの文字は表示されているんですが、、

new1ro

2020/04/22 08:15

bodyで反応がないのであれば、おそらくCSSファイルが読み込めていないですね。フォルダが同じであれば、こちらに書き換えてみてください。 <link rel="stylesheet" href="stylesheet.css"> (こちらからコピーして、title属性を消しました。http://www.htmq.com/html5/link.shtml) ----- CSSの読み込み権限がないかもしれません。「stylesheet.css」をブラウザで表示できますか? URLは以下のような、httpから始まる形であることが望ましいですが,, http://localhost/stylesheet.css 「403 Forbidden」などの文字が表示されたら、フォルダ (ファインダ) 内のCSSファイルを右クリックして読み込み権限を付与してください。

kassy1

2020/04/22 08:34

書き換えてやってみましたがかわりませんでした。上記のURLはページを表示できなかったので、フォルダを右クリックしてやってみたのですが、読み込み権限という選択肢がありません。

new1ro

2020/04/22 08:45

右クリックするのはフォルダではなくCSSファイルです。 Windowsなら.. CSSファイル右クリック > 「プロパティ」 > 「セキュリティ」、で「読み取り」というチェックボックスがあるようです。 https://news.mynavi.jp/article/liunx_win-9/ Macなら.. CSSファイルを右クリック > 「情報を見る」 > 末尾の「共有とアクセス権」の「アクセス権」で「読み/書き」もしくは「読み出しのみ」を選択 https://support.apple.com/ja-jp/guide/mac-help/mchlp1203/mac

kassy1

2020/04/22 08:56

自分はwindowsですがすでに読み取りにチェックが入っていました。

new1ro

2020/04/22 08:59 編集

わからなくなってきました.. 「stylesheet.css」のファイル名に全角文字が入っているとか..でしょうか? フォルダのキャプチャ画像を、質問に貼り付けてもらうことは可能ですか?

kassy1

2020/04/22 09:25

1度フォルダを消して１から作り始めたらできました。もしかしたら全角文字が入っていたのかもしれません。。ご迷惑おかけしました。ありがとうございました。

new1ro

2020/04/22 09:29

解決できたようで、よかったです..！