background-colorが認識されない

初めてHTML,CSSをゼロから書く者です.
下記のcssで書いた#a,#b,#cがデベロッパツールで認識されてないため色がついていない状態になっています。
ネットで探してみても大まかな文法自体は間違ってないことを確認したりデベロッパーツールででは参照されているcss自体が違っていたりしないことも確認しました。
またエディタを使って書いているので大まかな文法に間違いがあれば気づくはずだと思います。本当はほかにも質問したい(改善したい)ことが山ほどあるのですが一つの質問欄で二つ以上の質問はよくないと考え分割して質問させていただくことにしました。
皆様の力をお貸しください。
また質問マナーが守れているかも気になるのでそこのところも何かご指摘あれば教えてください。

HTML
1<!DOCTYPE html>
2<html5>
3
4<head>
5  <meta charset="UTF-8">
6  <meta name="viewport" content="width=device-width" />
7  <title>PenFriend Home</title>
8  <link rel="stylesheet" href="PenFriend.css" />
9</head>
10
11<body>
12  <header>
13    <div>
14      <h4 id="red">PenFriend
15        <span id="HOME">Home
16        </span>
17      </h4>
18      <div class="right">
19        <input type="button" value="ログインか新規登録">
20      </div>
21      <div class="right">
22        <input type="button" value="ページマップ">
23      </div>
24    </div>
25  </header>
26  <h2 id="a">PenFriendとは？</h2>
27  <h2 id="b">どうやって使うの？</h2>
28  <h2 id="c">Pen-Friendがメッセージを返してくれなくなったら？</h2>
29</body>

CSS3
1header {
2  background-color: blue;
3}
4#red{
5  color: red;
6}
7#HOME {
8  color: #EFFBFB;
9  margin-left:10px
10.white {
11  color: white;
12}
13.right{
14float: right;
15}
16#a{
17  background-color:red;
18}
19#b{
20  background-color:green;
21}
22#c{
23  background-color:red;
24}
25

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

回答2件

ベストアンサー

ネットで探してみても大まかな文法自体は間違ってないことを確認したり

自身が書いたコードをチェックにかけてください。
CSS Validation Service

構文チェック機能のあるエディタ、IDEなどでも警告は出ますよ。
下記はVSCode　

下記はEclipse

おそらく、こういうチェックが適切にできるだけでも「山ほどある」質問の多くは解決できるのでは。

HTMLにも目を向けると「html5なんてタグはない」とか気づけることもあるでしょう。

で、#HOME {をきちんと閉じた結果が下記ですが、想定する結果はこれですか？

投稿2020/11/07 02:02

編集2020/11/07 02:07

m.ts10806

総合スコア80875

退会済みユーザー

2020/11/07 02:58

想定とは違うのですが、全ての問題を一つの質問欄に載せるのは失礼かと思い、もう少し調べたり、先ほどおっしゃったようにコードチェックをしたりしながらしてそれでも無理そうでしたら質問しようかなと思っています。また、あくまで最初の作成なので、完成後もかなり見栄えが悪くなるのも承知の上です。

kai0310

2020/11/07 03:38

それで、この質問はどの様にして解決したかなどが分からないのですが

m.ts10806

2020/11/07 04:13

どんなに簡単なものであっても完成図を描いてから実装するものです。それが学習のためであっても。つまり作り始める前にはある程度整えらえた見栄えであるはずです。それが技術力や経験からやりたいこと再現できてないのならまだ分かりますが、ゴール描かずにやみくもに作ってるだけなら話は別です。

退会済みユーザー

2020/11/07 09:08

質問についてはm.ts10806様のコードチェックが入った点、.whiteのスタイルすべてを消したのとkai0310様のタイポ指摘を直したのを同時に行った時点で解決いたしました。両方切り分けて行うべきであったと反省しております。完成図については一応ノートに手書きに書き出して書いてはみまししたがそれほど詳細に詰められていないのが実情ですので、もう少し完成図については考え直します。ちなみに一番上以外にbackground-colorを付けたのは問題の究明(ボタンタグの位置がおかしい点)について役立つかと思いつけただけなのでこのようなデザインするつもりはありません。解決時点については、kai0310様のコメントへの返信で >後から気付いて確認しましたが、同時にほかの方の訂正支持(指示の間違いです、ごめんんさい)もこなしてしまったためどちらが原因かははっきりいたしませんでした。チェックが至らず申し訳ありません。スーパーリロードについては事前に行っております。と送った時点で解決報告として伝わるかなと考えていたので今までコメントで直接解決方法について言及しませんでした。

退会済みユーザー

2020/11/07 09:10

ちなみにすでに想定していた完成図からだいぶずれてしまっているので技術力の問題がかなり大きいです。

退会済みユーザー

2020/11/07 09:12

現時点で自分にマナー違反があればおっしゃっていただけると今後の糧になるのでぜひお願いします。

m.ts10806

2020/11/07 09:18

マナー違反とかは特にないですが、質問を読むのはあくまで赤の他人なので前提や背景は必要ですし、ゴールが明示されている必要があります。「完成図」があるのでしたら、提示可能な範囲で提示されたほうが前に進むアドバイスがつきやすくなります。解決した感がないままふわっとしているのが一番良くないですしね。私はあくまでデバッグの仕方の一部を回答としたにすぎません。

退会済みユーザー

2020/11/07 09:30

ご指摘ありがとうございます。今度からはできるだけ何が実現したいのかをあらかじめ明示するようにいたします。

m.ts10806

2020/11/07 09:32

初めのうちは「質問テンプレート」を利用して全ての項目を埋めるようにすると過不足も解消できるかと思います。 https://teratail.com/help/question-tips#questionTips3-8

kai0310

2020/11/07 10:52

私が解決方法を聞いた理由としては、以下が挙げられ特にマナー違反だとかは思っておりません。 1)質問者が本当に解決できたか確かめる為 2)同じ問題を抱えた人がこの質問を見た際に原因がわかるようにする為 3)回答をしたものとして単純に気になった為

退会済みユーザー

2020/11/08 02:54

回答ありがとうございます。今は確かに自分から質問を受け付けられる状態ではないので解決方法が分かったところで書くぐらいはしないとこのサイトの足手まといになってしまいかねませんよね。次回からはせめて解決方法できた方法を乗せることで少しでもこのサイトに資するようにします。

m.ts10806

2020/11/08 05:26

>このサイトの足手まといになってしまいかねませんよね。何を懸念しているか分かりません。回答者やユーザーランキング上位のユーザーでさえ「サイトへの貢献」よりも「エンジニアとしての貢献」のほうが意味合いとしては大きいと思います。私自身もサイトやサービスに貢献するつもりでやってるわけではないです。

退会済みユーザー

2020/11/08 10:48

御幣をもたらす発言でした。サイトに貢献することで結果的にエンジニア全体への貢献になるではないかとの思いで申し上げたのですが、それならばご指摘通り直接「エンジニアへの貢献」と申し上げればよかったです。

退会済みユーザー

2020/11/08 10:59

すみません。今のは単なる言い訳にすぎませんでした。「サイトに資する」発言したときはその意味合いについて深く考えていなかったのが実情です。

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

単純にタイポ

Diff
1
2#HOME {
3  color: #EFFBFB;
4- margin-left:10px
5+ margin-left:10px;
6+ }

投稿2020/11/07 01:53

kai0310

総合スコア2076

maisumakun

2020/11/07 01:55

CSSでは、閉じカッコの前のセミコロンは、書いたほうがいいとはいえ、文法的にはなくても問題ありません（あくまで複数の宣言を「区切る」ためのものです）。

退会済みユーザー

2020/11/07 02:02

お二人とも回答ありがとうございます。しかしchromeで確認したところ問題は改善されませんでした。どちらにせよ、セミコロンは忘れないように気を付けたいと思います。(キャッシュが残っていないか確認するため、デベロッパーツールでもコードが更新されていることは確認しました、エディタからの完全コピペのため、質問の際のコードの打ち間違いもないです)

m.ts10806

2020/11/07 02:03

書く書かないを迷うくらいなら書くで統一したほうが実装に集中できますね。

kai0310

2020/11/07 02:14 編集

> キャッシュが残っていないか確認するため、デベロッパーツールでもコードが更新されていることは確認しましたスーパーリロードを行い、そのソースコードを再度提示してください。

kai0310

2020/11/07 02:07

今回の直接的な問題で言えばセミコロンではなく閉じカッコが原因かと思いますが、確認されましたか？

退会済みユーザー

2020/11/07 02:30

後から気付いて確認しましたが、同時にほかの方の訂正支持もこなしてしまったためどちらが原因かははっきりいたしませんでした。チェックが至らず申し訳ありません。スーパーリロードについては事前に行っております。

退会済みユーザー

2020/11/07 02:40

次回からは段階的にコードを直していきますのでご容赦ください。

kai0310

2020/11/08 05:12

一番の問題点となるのは自分が何が原因で想定した結果になっていないか気づけていないことです。「勝手に動かなくなった」だとか「勝手に壊れた」なんてことはないのですから原因をまずは知らなくてはいけません。また同じ問題が起きた時、原因が分からないままでは自身だけで解決もできませんし、この質問を通して得られたことはないと言っても過言ではありません。

退会済みユーザー

2020/11/08 10:49

はい、おっしゃる通りだと思いますので次回からはコードを直していくのを一つ一つ行っていきたいと思います。

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

あなたの回答