cssに書いたプログラムが反映されない

前提・実現したいこと

cssを勉強し始めたのですがcssを書いてHTMLとつなげて反映しようとしてもHTML しかはんえいされませんCSSを反映しようとしてもただ入力したプログラムがそのまま表示されてしまいます。どうしたらいいでしょうか。

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

エラーメッセージ

該当のソースコード

css
1* {
2    margin:0;
3    padding:0;
4}
5
6.bg {
7    height:100vh;
8    background-color: green;
9    color: black;
10
11    background-image: url("https://cryptokoi.mochalab.jp/logo512.png");
12    background-size: 50% auto;
13    background-repeat: no-repeat;
14    background-position: center center;
15
16    font-weight: bold;
17}
18
19
20.header {
21    height: 50px;
22    color: red;
23}
24
25.footer {
26    height: 50px;
27    color: red;
28}
29
30.main {
31    height: calc( 100vh - 100px );
32    background-color: snow;
33    opacity: 0.9;
34}
35
36p {
37    font-size: 20px;
38}
39
40h1 {
41    color: black;
42    opacity: 1.0;
43}```ここに言語を入力

HTML
1<!DOCTYPE html>
2<html lang="Ja">
3<head>
4  <meta charset="utf-8">
5<title>Mochalab</title>
6<meta name="description" content="This website is made for testing">
7<link rel="icon" href="https://cryptokoi.Mochalab.jp/favicon.ico">
8<link rel="stylesheet" herf="style.css">
9</head>
10<body class="bg">
11<div class="header">Here is header</div>
12<div class="main">
13  <h1>Wercome to Mochalab</h1>
14  <P>Hello would!</P>
15</div>
16<div class="footer">Here is footer.</div>
17</body>
18
19```![イメージ説明](dec53659b4d42deaa86a5f48db3aa3ce.png)
20```![イメージ説明](5e359cea375c91175f12a129ae95a923.png)
21コード
22
23
24### 試したこと
25
26gogleで対処法の検索　jscodeでの確認
27
28### 補足情報（FW/ツールのバージョンなど）
29
30ここにより詳細な情報を記載してください。

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

回答1件

ベストアンサー

たぶん、eとrが逆になってるからかなぁと思います。
ファビコンは表示されてますよね？同じようにhrefに直してみましょう。
該当するコードは下の行になります。

html
1<link rel="stylesheet" herf="style.css">※追記、この行を『ご自身で』直してください

以下蛇足ですが、
エイチレフと読むようです。hの後にrefと覚えると順番を間違えにくいかもですっ
※昔は僕もよくやってましたよー

画像追加
再現してみましたが、herfからhrefへ変更してリロードした結果が下の画像です。

投稿2021/03/20 02:29

編集2021/03/20 05:45

退会済みユーザー

総合スコア0

hanpan

2021/03/20 03:00

一応変えてみましたがダメなようです・・・前回javascriptを勉強しようとした時も同じようにそのまま表示されてしまいまして・・・もうこれ別の問題とかなんですかね・・

退会済みユーザー

2021/03/20 05:30

あぁ、前回の人かっ！まず僕の環境を教えておくね。 win10 notePC chrome atomとりあえずこれくらいで良いかなぁ。試してみて欲しいことが１つ、 <style> CSSのコード </style> これでCSSが当たるか確認してみてください。僕も、コードの中でミスが無いか確認してみますね。

退会済みユーザー

2021/03/20 05:40

hanpan様僕の説明が悪かったかもしれないです。申し訳ない。回答に提示したコードをそのままコピペするのではなくて、「抜粋したものと同じコードを探して、『ご自身で』eとrを入れ替えて直してみてください」環境を再現して、herfをhrefに直してリロードした画像も上げておきますね。

hanpan

2021/03/20 07:04

style内に書き込んで何とか反映されました！ありがとうございました！

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