HTML,CSSでidが反映されず、調べても原因がわからず困っています。

前提・実現したいこと

私は、Webデザインを学ぶ初心者です。練習で作成中のページですが、idが反映されません。書籍、Webデザイン見るだけノートを見ながらしています。原因が分からず何時間も苦しみ困っています。原因が知りたいです。よろしくお願いいたします。

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

該当箇所↓

HTML
1　　<body id="top">

CSS↓

css
1#top h1 { 
2	　　#color: red; 
3	font-size: 100px;
4	line-height: 1.2; 
5	text-align: center;
6	margin: 100px 0 80px 0;
7   	}
8#top p {  
9	font-size: 40px;
10	color: #f3f3f2;  
11	text-align: center;
12  	}
13#top footer {
14	margin-top: 200px;
15	｝
16#top {
17
18	height: 100%;
19	background-image: url=("0.jpg");
20	background-repeat: no-repeat;
21	background-position: center;
22	background-attachment: fixed;/*背景画像固定*/
23	background-size: cover;
24	｝
25

該当のソースコード（全体）

HTML↓

HTML
1<!DOCTYPE html>
2<html>
3	<head>
4 		<meta charset="shift JIS">
5 		<title>テキスト</title>
6 		<link rel="stylesheet" type="text/css" href="mystyle.css">
7	</head>
8
9	<body id="top">
10		<header>
11			<a class="logo" href="index.html"><img src="title.gif" alt="テキスト"></a>
12			<nav>
13	 			<ul class="gloval-nav">
14				  <li><a href="profi-ru.html">テキスト</a></li>
15				  <li><a href="seicyou.html">テキスト</a></li>
16				  <li><a href="sakuhinnsyuu.html">テキスト</a></li>
17				  <li><a href="photo.html">テキスト</a></li>
18				  <li><a href="dokusyo.html">テキスト</a></li>
19				 </ul>
20			</nav>
21		</header>
22
23	 	<div class="main">
24
25		 		<h1>
26	  			テキスト
27	 			</h1>
28				<p>
29				テキスト
30				 <br>テキスト
31				 <br>テキスト
32		 		</p>
33		</div>
34	 		<p class="abc">
35				  <a href="profi-ru.html">テキスト</a>
36				  <a href="seicyou.html">テキスト</a>
37				  <a href="sakuhinnsyuu.html">テキスト</a>
38				  <a href="photo.html">テキスト</a>
39				  <a href="dokusyo.html">テキスト</a>
40			 </p>
41		
42		
43		<footer>
44		 		
45		 	 <small>テキスト</small>
46		 		
47		</footer>
48	</body>
49</html>
50

CSS↓

CSS
1body {
2	margin: 0;
3	padding: 0;
4	background-color: #f3f3f2; 
5	color:#433d3c; 
6	font-family: "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", "Hiragino Kaku Gothic ProN",
7	 "Arial", "Yu Gothic", "Meiryo", sans-serif; 
8	font-size: 15px;
9	line-height: 2;
10     }
11p,h1,h2,h3{
12	margin: 0;
13	}
14img {
15	vertical-align: bottom;
16	}
17ul {
18	margin: 0;
19	padding: 0;
20	}
21a { 
22	color: #BA55D3;
23	text-decoration: none;
24  }
25a:visited { 
26 	color: #8B008B;
27  }
28a:hover { 
29	text-decoration: underline;
30  }
31a:active { 
32 	color: #FA8072;
33	}
34header {
35	width: 960px;
36	height: 170px;
37	margin: 0 auto;
38	display: flex;/*ヘッダー内１層目の要素を横並び*/
39	justify-content: space-between;/*均等配置*/
40	align-items: center;
41	}
42.gloval-nav {
43	display: flex;/*リンク要素が横並び*/
44	justify-content: space-between;
45	}
46.gloval-nav li {
47	margin: 0 20px;
48	font-size: 18px;
49	list-style: none;/*マーク非表示*/
50	}
51.gloval-nav li a {
52	color: #433d3c;
53	}
54.gloval-nav li a:hover {
55	border-bottom: 2px solid #f3f3f2;/*下線　幅、スタイル、色*/
56	padding-bottom: 8px;/*文字とボーダーの余白*/
57	text-decoration: none;/*全体に影響しないように解除*/
58	}
59.main {
60	width: 960px;
61	margin: 0 auto;
62	}
63footer {
64	text-align: center;
65	color: #433d3c; 
66	padding: 20px 0;/*上下に２０左右に０*/
67	｝
68footer small {
69	font-size: 12px;
70	}
71/*
72em { 
73	 font-style: normal; 
74	 font-weight: bold; 
75	 background:#FFFACD; 
76   }
77
78  }
79p.welcome {
80 	text-align: center;
81  }
82/*↓表*//*
83table, td, th {
84	 border: 2px solid #006400;
85  }
86td, th {
87 	padding: 4px;
88  }
89th {
90	background: #F5FFFA; 
91  }*/
92#top h1 { 
93	color: red; 
94	font-size: 100px;
95	line-height: 1.2; 
96	text-align: center;
97	margin: 100px 0 80px 0;
98   	}
99#top p {  
100	font-size: 40px;
101	color: #f3f3f2;  
102	text-align: center;
103  	}
104#top footer {
105	margin-top: 200px;
106	｝
107#top {
108
109	height: 100%;
110	background-image: url=("0.jpg");
111	background-repeat: no-repeat;
112	background-position: center;
113	background-attachment: fixed;/*背景画像固定*/
114	background-size: cover;
115	｝
116

試したこと

キャッシュの除去（Ctrl＋F5）
スペル間違っていないかチェック（間違わないようにコピペで記入）
無意味だと思うがid名を変更してみました。変化なし。
閉じ忘れ、.　#　の使い間違いではないかも確認。
関係ない部分をコメントアウトして確認。→意味ないかもしれないけれど、該当箇所を最後尾に移動させて確認。変化なし。idなので優先順位高いと思うけれど念のため。
書籍、宝島社の、Webデザイン見るだけノート、フルスクリーンページを作ろう144ページから169ページに沿って真似して記述している（文章、フォントや写真、色指定以外は、レイアウト、数値指定などが殆ど一緒）ので、書籍と違うところがないか確認。

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

書籍、宝島社の、Webデザイン見るだけノート、フルスクリーンページを作ろう144ページから169ページに沿って真似して記述
Teraパッド使用
OS　Windows10
以上、宜しくお願い致します。

int32_t

2021/05/17 21:44

このコードでどうなることを期待していて、実際はどうなってしまうのですか? HTMLとCSSのコードはMarkdownの「コードを入力」機能でマークアップしてください。 https://teratail.com/help#about-markdown

m.ts10806

2021/05/17 23:11

明らかにおかしい記述はありますね。 url=("0.jpg") CSSの構文チェックからどうぞ

m.ts10806

2021/05/17 23:13

idに指定した要素だけきかないのか、全部なのかもっと簡単な記述にしたらどうなるか確かめるべきことは沢山あります。（書いてないと他人には状況は分かりません）

mei.m

2021/05/18 05:46

int32_tさん　言葉足らずですみません。また、私のミスでCSSの＃が消えてしまっていました。余計に分かりづらかったと思います。申し訳ございませんでした。 m.ts10806さん　＝が不要でした。ご指摘ありがとうございます。

m.ts10806

2021/05/18 05:50

質問は編集できます。マークダウンのコードは今からでもご対応ください

m.ts10806

2021/05/18 05:52

別のコメントに書いたように「消えた」のではなく「マークダウンの見出し機能がきいた」です。コード機能で囲めばそのような現象は起きません。

m.ts10806

2021/05/19 01:59

難しいなら下記参照。 https://teratail.com/questions/238564

mei.m

2021/05/19 02:18

m.ts10806さん　ありがとうございます。皆さんが見やすいようにマークダウンに変えたいのですが、恥ずかしながら書き方が分からず調べていました。しかし、私の質問の場合、タグのスペルミスやスペースの半角全角など細かな間違いである可能性もあり、そのあたりが分からなくなりそうなのと、とくに今回は問題の箇所がもともと＃のあるところなので、階層ととられないかおかしなことになりそうで、そのままにしています。コード機能で囲むというのも、よくわからないので調べましたが分かりませんでした。マークダウンで書く　という意味でよいのでしょうか？すみません、もし　どのように書けばよいか教えていただけたら幸いです。勉強し、直したいと考えています。宜しくお願い致します。

m.ts10806

2021/05/19 02:21

私が提示したリンクの質問を読んでください。おおよそこれでみなさん対応されています。

mei.m

2021/05/19 02:35

m.ts10806さん　ありがとうございます。リンクの質問を読みました。＜コード＞の中に入れればよかったのですね。難しく考えてしまっていました。お陰様で修正できました。本当にありがとうございました。

m.ts10806

2021/05/19 02:35

見ました。細かいですがファイル毎にわけられたほうが見やすいです。コード以外もないほうがありがたい。 1つのコードブロック内のコードをワンクリックでコピーできるようになってますし、言語ごとに文字がいい感じにハイライトしてくれるので。 a.html ```html a.htmlのコード ``` b.html ```html b.htmlのコード ``` a.css ```css a.cssのコード ``` あともう少し！

mei.m

2021/05/19 04:46

いろいろ教えていただきありがとうございます。直してみました。

m.ts10806

2021/05/19 04:55

OKと思います。ただ解決方法は少し考えたほうがいいかもしれません。「お手本と並べて間違い探し」ではなく「そもそも構文が正しいか、htmlとの整合性は取れてるか」で。問題が起きるのはあくまで自身が書いた眼の前の自身のコードですしね。

mei.m

2021/05/19 06:05

m.ts10806さん　おっしゃる通りで、不慣れ＋早とちりでStartingRailsさんのコードでもよく見たら反映されていないところがある事に痕になってきづいて、何故か？と先ほどまで直してみていました。構文やｈｔｍｌとの整合性のせいではなさそうで、取敢えずは意図した様になったのですが、結局は原因がいまいちよくわかりません。今一度何を変えて、意図通りになったのか整理してみます。

m.ts10806

2021/05/19 06:26

構成を最小限にして、１ブロックずつ確認していくと良いです。どんな複雑なレイアウトであっても小さなブロックの集合体です。それぞれのブロックが想定通りに動いて始めて結合して動きます。全て組み込んで全て見ようとすると問題切り分けが難しくなります。熟練者ほど一発でなんとかするのではなく、ざっくり削って問題切り分けをします。あちこち見て回るよりそのほうが早いです。

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

回答2件

cssの書き方自体は問題なさそうなので、

・mystyle.cssのファイル名が間違っている
・cssファイルの格納場所がhtmlファイルと同じ場所にない
・head内かcssファイル内に全角スペースが混じっている

かもしれません。

投稿2021/05/18 00:24

yarn

総合スコア28

mei.m

2021/05/18 05:49

woolenyarnさん　ご指摘のように全角半角など気づきにくい間違いで行き詰るものです。ちゃんとしているつもりが出来ていないことも多いです。ご回答ありがとうございました。

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

ベストアンサー

これで動きました．
原因はmystyle.cssのtopセレクタの#のつけ忘れではないでしょうか?

css
1body {
2  margin: 0;
3  padding: 0;
4  background-color: #f3f3f2; 
5  color:#433d3c; 
6  font-family: "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", "Hiragino Kaku Gothic ProN",
7  "Arial", "Yu Gothic", "Meiryo", sans-serif; 
8  font-size: 15px;
9  line-height: 2;
10}
11  
12p,h1,h2,h3{
13  margin: 0;
14}
15  
16img {
17  vertical-align: bottom;
18}
19
20ul {
21  margin: 0;
22  padding: 0;
23}
24
25a { 
26  color: #BA55D3;
27  text-decoration: none;
28}
29
30a:visited { 
31  color: #8B008B;
32}
33
34a:hover { 
35  text-decoration: underline;
36}
37
38a:active { 
39  color: #FA8072;
40}
41
42header {
43  width: 960px;
44  height: 170px;
45  margin: 0 auto;
46  display: flex;/*ヘッダー内１層目の要素を横並び*/
47  justify-content: space-between;/*均等配置*/
48  align-items: center;
49}
50
51.gloval-nav {
52  display: flex;/*リンク要素が横並び*/
53  justify-content: space-between;
54}
55
56.gloval-nav li {
57  margin: 0 20px;
58  font-size: 18px;
59  list-style: none;/*マーク非表示*/
60}
61
62.gloval-nav li a {
63  color: #433d3c;
64}
65
66.gloval-nav li a:hover {
67  border-bottom: 2px solid #f3f3f2;/*下線　幅、スタイル、色*/
68  padding-bottom: 8px;/*文字とボーダーの余白*/
69  text-decoration: none;/*全体に影響しないように解除*/
70}
71
72.main {
73  width: 960px;
74  margin: 0 auto;
75}
76
77/* idゾーン */
78#top {
79    height: 100%;
80    background-image: url=("0.jpg");
81    background-repeat: no-repeat;
82    background-position: center;
83    background-attachment: fixed;/*背景画像固定*/
84    background-size: cover;
85}
86  
87#top h1{
88    color: red;
89    font-size: 100px;
90    line-height: 1.2; 
91    text-align: center;
92    margin: 100px 0 80px 0;
93}
94  
95#top p{
96    font-size: 40px;
97    color: #f3f3f2;  
98    text-align: center;
99}
100
101#top footer{
102    margin-top: 200px;
103}
104
105/* footerゾーン */
106
107footer small {
108  font-size: 12px;
109}
110
111footer {
112  text-align: center;
113  color: #433d3c; 
114  padding: 20px 0;/*上下に２０左右に０*/
115｝
116  
117/*
118em { 
119  font-style: normal; 
120  font-weight: bold; 
121  background:#FFFACD; 
122}
123
124}
125p.welcome {
126  text-emphasis: none;xt-align: center;
127}
128/*↓表*//*
129  table, td, th {
130  border: 2px solid #006400;
131}
132td, th {
133  padding: 4px;
134}
135th {
136  background: #F5FFFA; 
137}*/

投稿2021/05/17 22:06

StartingRails

総合スコア22

m.ts10806

2021/05/17 23:12

>topセレクタの#のつけ忘れではないでしょうか? 提示されてるコードが本当ならマークダウンの見出し機能が効いてるだけですね。

mei.m

2021/05/18 05:42

m.ts10806さん　有難う御座います。質問の為コピーペーストした際に、＃が外れてしまった様です。なので、もともと付いていたのですが、反映されていなかったのです。貼って下さったコードを元のコードと並べて間違い探しのように比べて、topゾーンの並びを直していただいたのと同じに変えたら反映されました。本当に助かりました。

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

あなたの回答