CSSが反映されない

初めまして。
現在CSSの学習をしているものです。

bookAdmin.htmlにbookAd.cssがうまく反映されず困っております。自分の中では、誤りの個所が分からず本当に困っています。もし何か、お気づきの点がございましたら教えていただけると嬉しいです。
どうぞよろしくお願いいたします。

使用環境はEclipseです。

HTML
1<!DOCTYPE html>
2<html>
3<head>
4<meta charset="UTF-8">
5<title>書籍管理システム-<書籍情報管理></title>
6<link rel="stylesheet" href="bookAd.css">
7</head>
8<header>
9
10<div class="header">
11
12<div class="header_logo_font">
13<p>書籍管理システム</p>
14<p class="userName">ログインユーザー名：あああああああああああああああああああ</p>
15<div class="header-button">
16
17<a>MENU</a>
18<a href="#" class="btn-square">書籍情報一覧</a>
19<a href="#" class="btn-square">ログアウト</a>
20</div>
21</div>
22</div>
23
24
25</header>
26<body>
27
28<div class="body">
29
30<h2>書籍情報管理</h2>
31<h3>書籍登録</h3>
32<div class="content">
33<p>  書籍の登録はこちら→<input type="button" value="登録" class="submit"></p>
34</div>
35<h3>書籍検索</h3>
36
37<div class="content">
38<p>※両方入力した場合はAND検索になります</p>
39書籍名<input type="text">　内容<input type="text">
40<input type="button" value="検索" class="serch">
41
42</div>
43
44<br>
45
46<h4 align="center">エラーメッセージ</h4>
47<p align="center"><font color="red">ああああああああ</font></p>
48
49<br>
50
51<table  border="1" text-align="center">
52
53
54<tr>
55<th>書籍名</th>
56<th>出版社</th>
57<th>著者</th>
58<th>価格</th>
59<th>発行日</th>
60<th>冊数</th>
61<th>画像</th>
62</tr>
63
64<tr>
65<td>ああああああああああああああああああああああああああああああああああああああああああああああああああ</td>
66<td>あああああああああああああああああああああああああ</td>
67<td>あああああああああああああああああああああああああ</td>
68<td align="right">\111,111</td>
69<td align="right" >YYYY/MM/DD</td>
70<td align="right" >111</td>
71<td><a href="#">画像</a></td>
72</tr>
73
74<tr>
75<td>あああああ</td>
76<td>あああああ</td>
77<td>あああああ</td>
78<td align="right">\999,999</td>
79<td align="right" >YYYY/MM/DD</td>
80<td align="right" >999</td>
81<td><a href="#">画像</a></td>
82</tr>
83
84
85</table>
86
87</div>
88
89</body>
90
91<br>
92
93<br>
94
95<footer>
96
97<hr>
98
99
100</html>

css
1@charset "UTF-8";
2
3.header{
4	top:0;
5	left:0;
6	float:left;
7	position:fixed;
8
9  height:100px;
10  width:100%;
11  background-color:#808080;
12
13  padding:10px;
14}
15
16.userName{
17	padding-right:50px;
18	float:right;
19}
20
21.header_logo{
22	float:left
23}
24
25.header-logo{
26	padding-top:10px;
27}
28.header_logo_font{
29	color:white;
30}
31
32.btn-square {
33  display: inline-block;
34  padding: 0.5em 1em;
35  text-decoration: none;
36  background: rgba(34, 49, 52);/*ボタン色*/
37  color: #FFF;
38  border-bottom: solid 4px #627295;
39  border-radius: 3px;
40  margin-left:20px;
41}
42.btn-square:active {
43  /*ボタンを押したとき*/
44  -webkit-transform: translateY(4px);
45  transform: translateY(4px);/*下に動く*/
46  border-bottom: none;/*線を消す*/
47}
48
49.btn-square-red {
50  display: inline-block;
51  padding: 0.5em 1em;
52  text-decoration: none;
53  background: rgba(34, 49, 52);/*ボタン色*/
54  color: #FFF;
55  border-bottom: solid 4px #627295;
56  border-radius: 3px;
57  float:right;
58  margin-right:50px;
59}
60.btn-square-red:active {
61  /*ボタンを押したとき*/
62  -webkit-transform: translateY(4px);
63  transform: translateY(4px);/*下に動く*/
64  border-bottom: none;/*線を消す*/
65}
66.header-logo{
67	padding-top:10px;
68}
69
70.body{
71	padding-top:150px;
72	padding-bottom:150px;
73	width:100%;
74	height:500px;
75}
76
77
78h4{
79	color:red;
80}
81.submit{
82	padding-right:50px;
83	padding-left:50px;
84}
85.serch{
86	padding-right:50px;
87	padding-left:50px;
88}
89
90table{
91	width:100%;
92}
93
94.serch{
95	paddnig:80px;
96}
97
98
99
100th{
101	background-color:rgba(34, 49, 52);
102	color:white;
103}
104
105@media(max-width:670px){
106
107	.btn-square {
108  display: inline-block;
109  padding: 0.5em 1em;
110  text-decoration: none;
111  background: rgba(34, 49, 52);/*ボタン色*/
112  color: #FFF;
113  border-bottom: solid 4px #627295;
114  border-radius: 3px;
115  margin-left:20px;
116  width:10%;
117}
118.btn-square:active {
119  /*ボタンを押したとき*/
120  -webkit-transform: translateY(4px);
121  transform: translateY(4px);/*下に動く*/
122  border-bottom: none;/*線を消す*/
123}
124
125.btn-square-red {
126  display: inline-block;
127  padding: 0.5em 1em;
128  text-decoration: none;
129  background: rgba(34, 49, 52);/*ボタン色*/
130  color: #FFF;
131  border-bottom: solid 4px #627295;
132  border-radius: 3px;
133  float:right;
134  margin-right:50px;
135}
136.btn-square-red:active {
137  /*ボタンを押したとき*/
138  -webkit-transform: translateY(4px);
139  transform: translateY(4px);/*下に動く*/
140  border-bottom: none;/*線を消す*/
141}
142
143}

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

回答2件

ベストアンサー

HTML、CSSともに何かしらの制御文字のようなものが入っているようです。
それを削除したところそれなりにスタイルが効いている状態を確認できました。
細かいところまでは見てません。
以下は制御文字？を削除したもの

html
1<!DOCTYPE html>
2<html>
3<head>
4<meta charset="UTF-8">
5<title>書籍管理システム-<書籍情報管理></title>
6<link rel="stylesheet" href="bookAd.css">
7</head>
8<header>
9
10<div class="header">
11
12<div class="header_logo_font">
13<p>書籍管理システム</p>
14<p class="userName">ログインユーザー名：あああああああああああああああああああ</p>
15<div class="header-button">
16
17<a>MENU</a>
18<a href="#" class="btn-square">書籍情報一覧</a>
19<a href="#" class="btn-square">ログアウト</a>
20</div>
21</div>
22</div>
23
24
25</header>
26<body>
27
28<div class="body">
29
30<h2>書籍情報管理</h2>
31<h3>書籍登録</h3>
32<div class="content">
33<p>  書籍の登録はこちら→<input type="button" value="登録" class="submit"></p>
34</div>
35<h3>書籍検索</h3>
36
37<div class="content">
38<p>※両方入力した場合はAND検索になります</p>
39書籍名<input type="text">　内容<input type="text">
40<input type="button" value="検索" class="serch">
41
42</div>
43
44<br>
45
46<h4 align="center">エラーメッセージ</h4>
47<p align="center"><font color="red">ああああああああ</font></p>
48
49<br>
50
51<table  border="1" text-align="center">
52
53
54<tr>
55<th>書籍名</th>
56<th>出版社</th>
57<th>著者</th>
58<th>価格</th>
59<th>発行日</th>
60<th>冊数</th>
61<th>画像</th>
62</tr>
63
64<tr>
65<td>ああああああああああああああああああああああああああああああああああああああああああああああああああ</td>
66<td>あああああああああああああああああああああああああ</td>
67<td>あああああああああああああああああああああああああ</td>
68<td align="right">\111,111</td>
69<td align="right" >YYYY/MM/DD</td>
70<td align="right" >111</td>
71<td><a href="#">画像</a></td>
72</tr>
73
74<tr>
75<td>あああああ</td>
76<td>あああああ</td>
77<td>あああああ</td>
78<td align="right">\999,999</td>
79<td align="right" >YYYY/MM/DD</td>
80<td align="right" >999</td>
81<td><a href="#">画像</a></td>
82</tr>
83
84
85</table>
86
87</div>
88
89</body>
90
91<br>
92
93<br>
94
95<footer>
96
97<hr>
98
99
100</html>

css
1@charset "UTF-8";
2
3.header{
4    top:0;
5    left:0;
6    float:left;
7    position:fixed;
8
9  height:100px;
10  width:100%;
11  background-color:#808080;
12
13  padding:10px;
14}
15
16.userName{
17    padding-right:50px;
18    float:right;
19}
20
21.header_logo{
22    float:left
23}
24
25.header-logo{
26    padding-top:10px;
27}
28.header_logo_font{
29    color:white;
30}
31
32.btn-square {
33  display: inline-block;
34  padding: 0.5em 1em;
35  text-decoration: none;
36  background: rgba(34, 49, 52);/*ボタン色*/
37  color: #FFF;
38  border-bottom: solid 4px #627295;
39  border-radius: 3px;
40  margin-left:20px;
41}
42.btn-square:active {
43  /*ボタンを押したとき*/
44  -webkit-transform: translateY(4px);
45  transform: translateY(4px);/*下に動く*/
46  border-bottom: none;/*線を消す*/
47}
48
49.btn-square-red {
50  display: inline-block;
51  padding: 0.5em 1em;
52  text-decoration: none;
53  background: rgba(34, 49, 52);/*ボタン色*/
54  color: #FFF;
55  border-bottom: solid 4px #627295;
56  border-radius: 3px;
57  float:right;
58  margin-right:50px;
59}
60.btn-square-red:active {
61  /*ボタンを押したとき*/
62  -webkit-transform: translateY(4px);
63  transform: translateY(4px);/*下に動く*/
64  border-bottom: none;/*線を消す*/
65}
66.header-logo{
67    padding-top:10px;
68}
69
70.body{
71    padding-top:150px;
72    padding-bottom:150px;
73    width:100%;
74    height:500px;
75}
76
77
78h4{
79    color:red;
80}
81.submit{
82    padding-right:50px;
83    padding-left:50px;
84}
85.serch{
86    padding-right:50px;
87    padding-left:50px;
88}
89
90table{
91    width:100%;
92}
93
94.serch{
95    paddnig:80px;
96}
97
98
99
100th{
101    background-color:rgba(34, 49, 52);
102    color:white;
103}
104
105@media(max-width:670px){
106
107    .btn-square {
108  display: inline-block;
109  padding: 0.5em 1em;
110  text-decoration: none;
111  background: rgba(34, 49, 52);/*ボタン色*/
112  color: #FFF;
113  border-bottom: solid 4px #627295;
114  border-radius: 3px;
115  margin-left:20px;
116  width:10%;
117}
118.btn-square:active {
119  /*ボタンを押したとき*/
120  -webkit-transform: translateY(4px);
121  transform: translateY(4px);/*下に動く*/
122  border-bottom: none;/*線を消す*/
123}
124
125.btn-square-red {
126  display: inline-block;
127  padding: 0.5em 1em;
128  text-decoration: none;
129  background: rgba(34, 49, 52);/*ボタン色*/
130  color: #FFF;
131  border-bottom: solid 4px #627295;
132  border-radius: 3px;
133  float:right;
134  margin-right:50px;
135}
136.btn-square-red:active {
137  /*ボタンを押したとき*/
138  -webkit-transform: translateY(4px);
139  transform: translateY(4px);/*下に動く*/
140  border-bottom: none;/*線を消す*/
141}
142
143}

ただし<header>や<footer>が<body>の外に出てしまっているので修正が必要だと思います。
インデントがついていなかったりごちゃごちゃだったり、<font>タグの使用も気になるところです。

投稿2020/06/18 01:07

dit.

総合スコア3235

ypk

2020/06/18 01:33

ありがとうございます。無事に反映されました。最後に、ヘッダーをもう少し高さを持たせたいのですがどのようにすればよいでしょうか？というのも、ログインユーザー名が半分切れてしまっていて、、、、そこを改善することができたらと考えています。お手数をおかけしますがどうぞよろしくお願いいたします。

dit.

2020/06/18 02:03 編集

ヘッダーの高さは`height:100px;`を指定しているのでは？「もう少し高さを持たせる」だけならこれを大きくすればいいかと思いますが、どちらにしろウィンドウサイズを狭めた時などに「書籍情報一覧」「ログアウト」などもヘッダーからははみ出るので他の調整が必要だとは思います。（私の環境では「ユーザー名が半分切れる」が再現できませんでした）ヘッダーの高さが（内容やウィンドウサイズによって）可変+上部固定で、.bodyのpadding-topで重なり部分を調整しているのであれば、JavaScriptで.headerの高さを取得し、.bodyのpadding-topをそれに合わせて書き換えるという手もあると思います。

ypk

2020/06/18 02:12

ありがとうございます。大変勉強になりました。今後ともよろしくお願いいたします。

ypk

2020/06/18 02:15

ごめんなさい、最後に一つだけ。制御文字とは具体的にどういった意味なのでしょうか。今回の例でいうと、私のコードの何が制御文字だったのでしょうか、お手数をおかけしますがどうぞよろしくお願いいたします。

dit.

2020/06/18 03:21

正体を確認せず、よくわからない文字が入っていたので制御文字のようなものと表現してしまいましたが、kaputarosさんの指摘を見ると「\u200b」のようです。「\u200b」をググると「Unicodeのゼロ幅スペース」と出てきました。制御文字 https://ja.wikipedia.org/wiki/%E5%88%B6%E5%BE%A1%E6%96%87%E5%AD%97 ゼロ幅スペース https://ja.wikipedia.org/wiki/%E3%82%BC%E3%83%AD%E5%B9%85%E3%82%B9%E3%83%9A%E3%83%BC%E3%82%B9 なぜこれが入ってしまったかはわかりませんが、具体的にはCSS側の.headerのドットの前など合わせて16か所あります。（回答にはHTMLともにと書いてしまったのですが今確認したらHTML側には入っていないようです）半角全角のスペースを表示するような設定のエディタを利用していて、そのスペースの表示以外で文字の位置がずれていたため気が付きました。

ypk

2020/06/18 03:52

ご丁寧にありがとうございます。大変勉強になりました。今後ともよろしくお願いいたします。

kaputaros

2020/06/19 06:50

自分は、ここのサイトで、入り込んでいるものが何かわかりましたよ↓ https://jsfiddle.net/ ちょっとしたものを試すのに楽です。ご参考まで。

ypk

2020/06/19 07:10

ご丁寧にありがとうございます。確認してみます。

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

.ditさんもおっしゃられてるように、変なスペース(\u200b)が入り込んでいるようです。

あと、綴り間違い↓

ccs
1.serch {
2  paddnig: 80px; // → padding
3}

ついでに、あまり問題ないですが、「検索」英語の綴りは serch　→ search です(笑)

投稿2020/06/18 01:13

編集2020/06/18 01:21

kaputaros

総合スコア1844

ypk

2020/06/18 01:34

ありがとうございます。綴り間違い、気づきませんでした、、、、ありがとうございます。無事に反映されました。最後に、ヘッダーをもう少し高さを持たせたいのですがどのようにすればよいでしょうか？というのも、ログインユーザー名が半分切れてしまっていて、、、、そこを改善することができたらと考えています。お手数をおかけしますがどうぞよろしくお願いいたします。

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

あなたの回答