初めての質問で至らない点もございますがよろしくお願いします。
htmlにcssが反映されません。

<html>
<head>
<link rel="stylesheet" href="index.css">
<title>バイクのプロフィール</title>
</head>

<body>
  <header class="page-header">
  <h1><a href="index.html"><img src ="images/logo.svg" alt="ロゴ"></a></h1>
  <nav>
    <ul class="main-nav">
      <li><a href="about.html">About</a></li>
        <li><a href="bicycle.html">Bicycle</a></li>
</ul>
</nav>
</header>
</body>

</html>```ここに言語を入力
@charset "UTF-8";

html {
font-size:100%; }

body {
font-family:"Yu Gothic Medium","游ゴシック Medium",YuGothic,"游ゴシック体","ヒラギノ角ゴ pro W3", sans-serif;
line-height:1.7;
color:#432;
}
a {
  text-decoration:none;
}
img {
  max-width: 100%;
}
.main-nav {
  list-style-type:none; 
}

m.ts10806

2021/04/29 13:56 編集

どうなる予定でどうなっていますか？「反映されない」も一部なのか全部なのかただ、いずれにしても同様の質問は過去にも多く出ていますし、原因も対策もそんなに多岐に渡りません。まず過去質問調べてください。私も幾度となく回答しています。

m.ts10806

2021/04/29 13:57

検索例 https://teratail.com/search?q=%E5%8F%8D%E6%98%A0+tag%3ACSS&sort=updated-desc

itagagaki

2021/04/29 13:59

まず確認です。 @charset "UTF-8"; 以降は、その上のhtmlのファイルとは別のファイルですよね？そして、そのファイル名は index.css で、htmlファイルと同じディレクトリ（フォルダ）にありますか？もしそうなら反映されるはずです。たとえばリンクからは下線が消えますし、AboutやBicycleの左の・も消えます。

haitaneko

2021/04/29 14:11

回答ありがとうございます。バイクというフォルダにindex.html、index.css、images(フォルダ)となっています。 CSSは全部が反映されておらず、リンクの下線も消えておらず・も消えていない状態です。

m.ts10806

2021/04/29 14:16 編集

こちらは回答ではなく質問への追記修正欄です。質問を編集し、状況追記してください。

itagagaki

2021/04/29 14:25

私が確認したindex.htmlとindex.cssをGoogleドライブに上げました。 https://drive.google.com/drive/folders/1-KS7FI8dRQdD88OHqjJITdFIiYX0c6kx これを適当なフォルダにコピーして見てみてください。それでもCSSが反映されないなら、ファイルの問題ではないので別のもの（ブラウザとか）を疑わねばなりません。

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

回答1件

解決策

htmlファイルにcssを埋め込んでも良いのであれば、
index.cssの内容をheadタグ内に入れれば良いと思います。

HTML(index.html)
1<!DOCTYPE html>
2<html>
3<head>
4<style>
5html {
6font-size:100%; }
7
8body {
9font-family:"Yu Gothic Medium","游ゴシック Medium",YuGothic,"游ゴシック体","ヒラギノ角ゴ pro W3", sans-serif;
10line-height:1.7;
11color:#432;
12}
13a {
14  text-decoration:none;
15}
16img {
17  max-width: 100%;
18}
19.main-nav {
20  list-style-type:none; 
21}
22</style>
23<title>バイクのプロフィール</title>
24</head>
25
26<body>
27  <header class="page-header">
28  <h1><a href="index.html"><img src ="images/logo.svg" alt="ロゴ"></a></h1>
29  <nav>
30    <ul class="main-nav">
31      <li><a href="about.html">About</a></li>
32        <li><a href="bicycle.html">Bicycle</a></li>
33</ul>
34</nav>
35</header>
36</body>
37
38</html>

他の解決策

これで動かなければファイル名が間違っている可能性があります。
Windows10ならエクスプローラーの表示タブファイル名拡張子にチェックを入れてください。
index.html.txtのようになっていませんか?
これをやっても動かなければ最新版のGoogleChromeで動かしてみてください。
これでも動かなければわかりません。

投稿2022/04/30 15:47

編集2022/04/30 15:48