質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.37%
HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

文字コード

文字コードとは、文字や記号をコンピュータ上で使用するために用いられるバイト表現を指します。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

971閲覧

ブラウザでCSSが反映されない/デベロッパツールにCSSファイルが表示されない

chaco0o0o

総合スコア2

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

文字コード

文字コードとは、文字や記号をコンピュータ上で使用するために用いられるバイト表現を指します。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2021/08/25 00:51

前提・実現したいこと

VScodeでHTML、CSSを入力したところCSSが反映されません。
CSSを適用したいです。

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

練習の為自作のサイトを作ってみようとHTML→CSSの順でファイルを作成したのですが、CSSが反映されない事が分かりました。
自分の記述が間違っている可能性も考え、新しくテストファイルを作成し「”あ”を赤文字にする(正確には赤文字ではありませんが)」HTML、CSSを記述しましたが変わらず反映されないままです。
デベロッパツールで検証してみたところ「Sources」の欄にCSSファイルが表示されていませんでした。
可視化されている問題点がここしかないので、まずはここに問題があるのだと思うのですが何をしたらいいのか分かりません。

CSSファイルは「CSSフォルダ」に格納されており、HTMLファイルとCSSフォルダは同じ階層に置いてあります。
「reset.css」はCSSフレームワークです。

該当のソースコード

【HTML】

<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="styleseet" href="./css/reset.css"> <link rel="styleseet" href="./css/style.css"> <title>test</title> </head> <body> <header> <h1>あ</h1> </header> <main>
</main> <footer> </footer>
</body> </html>

【CSS】
@charset "UTF-8";
h1 {
color: crimson;
}

試したこと

検索で出てくるような解決法(パスの確認、スペルミスの確認、スーパーリロードなど)は試しましたが改善されません。

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

テキストエディタはVirtualStudioCodeを使用しています。
ブラウザは主にGoogleで、他ブラウザ(インターネットエクスプローラー、マイクロソフトエッジ)も試しましたが同じ状態です。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

K_3578

2021/08/25 00:57

コピペがしづらいし、インデントが無くなるのでソースコードはMarkDownのcodeで提示するように しましょう。
chaco0o0o

2021/08/26 06:41

ご指摘ありがとうございます。以下のサイトのようなブラウザで変換、コピペするだけで良いのでしょうか? https://pronama.jp/md/
guest

回答1

0

ベストアンサー

rel="styleseet"じゃなくてrel="stylesheet"のミスでは?

リンク種別 - HTML: HyperText Markup Language | MDN
rel属性に使われる値についてはこの辺りを見られるとよろしいかと

投稿2021/08/25 00:53

編集2021/08/25 01:05
K_3578

総合スコア1282

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

chaco0o0o

2021/08/25 01:35

あつ・・・。見落としておりました。 修正したら反映されました。ありがとうございます!
K_3578

2021/08/25 01:40

こういう見落としがないようによく使うような物は覚えておくに越したことはないです。 それと、以降質問する時のため、他にこの質問を見る人のためにも質問文のソースコードはMarkDown で書いて頂けると。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.37%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問