外部ｃｓｓの反映方法がわかりません。

前提・実現したいこと

htmlと外部CSSを同じ階層（フォルダ）に入れて、HPを製作しています。
外部cssをHTMLに反映させたいです。

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

外部CSSがhtmlに反映されません。

該当のソースコード

HTML

<!DOCTYPE>
  <html lang="ja">
    <head>
          <meta charset="UTF-8">
          <title>STERUNDのHP</title>
          <link rel="stylesheet" href="style.css" type="text/css">
         
        </head>
         <body>

         <h1>hight que plactice<br>
          高音質な機材で練習を支えます！
        </h1>
         <hr>

 </body>
  </html>

ｃｓｓ

@charset"UTF-8"

h1{
 font-size:20px;
｝

試したこと

Google　chromeでのプレビューやＶＳCODEでのプレビュー機能での確認。
ＨＴＭＬの半角確認や、Ｗ3Ｃのマークアップ検証でのコード確認。
階層確認の為のフォルダの移動やＣＳＳの保存名の変更。

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

VSCODE
バージョン: 1.58.0 (user setup)
コミット: 2d23c42a936db1c7b3b06f918cde29561cc47cd6
日付: 2021-07-08T06:54:55.083Z
Electron: 12.0.13
Chrome: 89.0.4389.128
Node.js: 14.16.0
V8: 8.9.255.25-electron.0
OS: Windows_NT x64 10.0.19042

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

回答2件

ベストアンサー

cssが色々誤ってるからですね。

css
1@charset"UTF-8"; //セミコロンがない(コメントにならないのでこっちには追加してます。)
2
3h1{
4 font-size:20px;
5｝//全角の中括弧になっている。

構文チェック出来るエディタ使ってれば気付くケアレスミスなのでVScodeならそういう拡張機能なら
幾らでもあるでしょうからすぐ入れましょう。

投稿2021/07/12 06:25

編集2021/07/12 06:28

K_3578

総合スコア1282

m.ts10806

2021/07/12 06:29

最後の閉じカッコだと無視してそれ以前は反映されてしまうから注意ですね。

K_3578

2021/07/12 06:36

そうですね。なので視覚的にエラーがわかるような機能は入れるべきだと思います。この程度のミスで止まってたら時間が勿体ないと思いますし。個人的には<!DOCTYPE>が気になりますが。

shinji-y

2021/07/12 06:58

ありがとうございます！構文チェック出来る拡張機能探して再度自分で視覚的に判断して進めて行きたいと思います。

K_3578

2021/07/12 07:04 編集

私はVScodeほぼ使ってないので記憶が曖昧ですが、W3CValidationって拡張機能とかもあったはずです。ただ、JREを入れてないと使えなかった気がするので参考程度にどうぞ。 ※｢W3CValidation｣はHTML用でした。失礼。CSSだと｢CSSTree validator｣があるかな。

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