HTMLにCSSが反映されない

実現したいこと

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

前提

初心者なのですが、HTMLとCSSを学んでおり、現在ポートフォリオを作成しています。
そこでHTMLでCSSを反映させたいのですが、クロームで確認してもCSSのスタイルが反映されません。

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

エラーメッセージ

該当のソースコード

HTML

CSS

試したこと

・HTMLでCSSのリンクを指定されていることを確認しました。
・HTMLとCSSが同じファイルの中に入っていることを確認しました。

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

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

m.ts10806

2023/06/27 00:54

コードを画像で提示されても再現確認ができないので、テキストでマークダウンのcodeでご提示ください

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

回答2件

ベストアンサー

rel="stylesheat"
↓↓↓
rel="stylesheet"

投稿2023/06/27 02:03

yambejp

総合スコア117990

tom0

2023/06/28 04:39

ありがとうございます！

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

この回答はGPT-4による自動生成回答です

以下のように、HTMLファイル内でCSSファイルへのリンクを正しく設定しているか確認してください。

HTML

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <meta charset="UTF-8">
5  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6  <title>ポートフォリオ</title>
7  <link rel="stylesheet" href="style.css">
8</head>
9<body>
10  <!-- 以下、コンテンツ -->
11</body>
12</html>

CSS

css
1body {
2  background-color: #f0f0f0;
3}

<link>タグが<head>タグ内にあることを確認してください。
href属性にCSSファイルへの正しいパスが設定されていることを確認してください。例えば、style.cssがHTMLファイルと同じディレクトリにある場合、href="style.css"となります。

これらの設定が正しくてもCSSが反映されない場合、以下のことを試してみてください。

ブラウザのキャッシュをクリアして、ページを再読み込みしてみてください。
別のブラウザでページを開いてみて、同じ問題が発生するか確認してください。
開発者ツール（Chromeの場合、Ctrl + Shift + Iで開くことができます）を使って、CSSファイルが正しく読み込まれているか確認してください。

投稿2023/06/26 17:15