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

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

新規登録して質問してみよう
ただいま回答率
85.50%
HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

2回答

265閲覧

CSSが反映されない

ypk

総合スコア80

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2020/06/18 00:33

初めまして。
現在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> 910<div class="header"> 1112<div class="header_logo_font"> 13<p>書籍管理システム</p> 14<p class="userName">ログインユーザー名:あああああああああああああああああああ</p> 15<div class="header-button"> 1617<a>MENU</a> 18<a href="#" class="btn-square">書籍情報一覧</a> 19<a href="#" class="btn-square">ログアウト</a> 20</div> 21</div> 22</div> 232425</header> 26<body> 2728<div class="body"> 2930<h2>書籍情報管理</h2> 31<h3>書籍登録</h3> 32<div class="content"> 33<p> 書籍の登録はこちら→<input type="button" value="登録" class="submit"></p> 34</div> 35<h3>書籍検索</h3> 3637<div class="content"> 38<p>※両方入力した場合はAND検索になります</p> 39書籍名<input type="text"> 内容<input type="text"> 40<input type="button" value="検索" class="serch"> 4142</div> 4344<br> 4546<h4 align="center">エラーメッセージ</h4> 47<p align="center"><font color="red">ああああああああ</font></p> 4849<br> 5051<table border="1" text-align="center"> 525354<tr> 55<th>書籍名</th> 56<th>出版社</th> 57<th>著者</th> 58<th>価格</th> 59<th>発行日</th> 60<th>冊数</th> 61<th>画像</th> 62</tr> 6364<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> 7374<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> 838485</table> 8687</div> 8889</body> 9091<br> 9293<br> 9495<footer> 9697<hr> 9899 100</html>

css

1@charset "UTF-8"; 23.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} 1516.userName{ 17 padding-right:50px; 18 float:right; 19} 2021.header_logo{ 22 float:left 23} 2425.header-logo{ 26 padding-top:10px; 27} 28.header_logo_font{ 29 color:white; 30} 3132.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} 4849.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} 6970.body{ 71 padding-top:150px; 72 padding-bottom:150px; 73 width:100%; 74 height:500px; 75} 767778h4{ 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} 8990table{ 91 width:100%; 92} 9394.serch{ 95 paddnig:80px; 96} 979899100th{ 101 background-color:rgba(34, 49, 52); 102 color:white; 103} 104105@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} 124125.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}

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

ベストアンサー

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

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

0

.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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問