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内に書き込んで何とか反映されました！ありがとうございました！

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

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

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

ただいまの回答率
85.46%

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

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

質問する

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

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