ボタンのcssが一部にしか効かない

ボタンホバーのcssがthreads.phpのclass="button"の削除、変更ボタンにしか効かなくて困っています。
boards.phpの削除、変更ボタンには効かないです。
他のボタンにもホバーのcssを効かせたいです。
htmlは同じだからなぜ他にかからないのかがわかりません。
アドバイスもらえると嬉しいです。

html
1//boards.php
2<!DOCTYPE html>
3<html lang="ja">
4  <head>
5    <link rel="stylesheet" href="/css/styles.css">
6    <meta charset="utf-8">
7    <title>メインページ</title>
8    <h1>掲示板へようこそ</h1>
9    <h2>新規投稿</h2>
10  </head>
11  <body>
12  <section>
13    <form action="" method="post">
14      <label for="title">タイトル</label><br>
15      <input type="text" name="title" id="title"><br>
16      <button type="submit">部屋を立てる</button>
17      <input type="hidden" name="token" value="29a27366d051dfe26cea26b9a13342519343257dd8fd7e5d3dfd9f3c4a489c28">
18    </form>
19    <h2>投稿一覧</h2>
20    <p>現在の投稿は71件です</p>
21    <div class="flexbox">
22      <div class="posts">
23        <a href='threads.php?boards_id=143'>
24            ゆうき            2020-03-04 10:21:14 <br>
25            質問          </a>
26      </div>
27      <div class="button">
28        <form action="change.php" method="get">
29          <button type="submit" name="boards_id" value="143">編集</button>
30        </form>
31        <form action="delete.php" method="get">
32          <button type="submit" name="boards_id" value="143">削除</button>
33        </form>
34      </div>
35    </div>
36  </section>
37  </body>
38</html>
39
40//threads.php
41<html lang="ja">
42  <head>
43    <link rel="stylesheet" href="/css/styles.css">
44    <meta charset="utf-8">
45    <title>メインページ</title>
46    <h1>掲示板へようこそ</h1>
47    <h2>新規投稿</h2>
48  </head>
49  <body>
50  <section>
51    <form action="" method="post">
52      <textarea name="comment" rows="8" cols="80"></textarea><br>
53      <input type="hidden" name="token" value="d93215f0ef7108f6b68de279972f55b20147700817314e6df1d5343448f280c0">
54      <button type="submit">送信</button>
55    </form>
56  </section>
57  <section>
58    <h2>投稿一覧</h2>
59    <p>現在の投稿は1件</p>
60    <div class="flexbox">
61      <div class="posts">
62        <p>
63          ゆうき            2020-03-04 10:49:35<br>
64          aaaaaaaa          </p>
65      </div>
66      <div class="button">
67        <form action="change.php" method="get">
68          <button type="submit" name="threads_id" value="38">編集</button>
69          <input type="hidden" name="board_id" value="143">
70        </form>
71        <form action="delete.php" method="get">
72          <button type="submit" name="threads_id" value="38">削除</button>
73        </form>
74      </div>
75    </div>
76  </section>
77  </body>
78</html>
79

css
1h1,h2,form{
2  text-align:center;
3}
4
5body,form{
6  margin:0;
7}
8
9a{
10  color:blue;
11}
12
13.error{
14  text-align:center;
15  color:red;
16}
17
18button{
19  display: inline-block;
20  padding: 0.3em 1em;
21  text-decoration: none;
22  color: #67c5ff;
23  border: solid 1px #67c5ff;
24  border-radius: 3px;
25  transition: .4s;
26  outline:none;
27}
28
29.button{
30  display:block;
31}
32
33.button :hover{
34  background: #67c5ff;
35  color: white;
36}
37
38.flexbox{
39  display:flex;
40}
41
42.posts{
43  background-color:#ffeecc;
44  width:100%;
45}
46
47.posts:hover{
48  background:#ffee;
49}
50
51.posts a{
52  display:flex;
53  height:100%;
54  justify-content:center;
55  align-items:center;
56}
57
58.posts p{
59  display:flex;
60  height:100%;
61  justify-content:center;
62  align-items:center;
63  margin-top: 0;
64}

html
1//threads.php
2<div class="flexbox">
3  <div class="posts">
4    <p>
5      aaa            2020-03-04 09:59:27<br>
6      あああ
7    </p>
8  </div>
9  <div class="button">
10    <form action="change.php" method="get">
11      <button type="submit" name="threads_id" value="35">編集</button>
12      <input type="hidden" name="board_id" value="140">
13    </form>
14    <form action="delete.php" method="get">
15      <button type="submit" name="threads_id" value="35">削除</button>
16    </form>
17  </div>
18</div>
19
20//boards.php
21<div class="flexbox">
22  <div class="posts">
23    <a href='threads.php?boards_id=140'>
24     aaa            2020-03-03 18:36:55 <br>
25     質問
26    </a>
27 </div>
28 <div class="button">
29   <form action="change.php" method="get">
30     <button type="submit" name="boards_id" value="140">編集</button>
31   </form>
32   <form action="delete.php" method="get">
33     <button type="submit" name="boards_id" value="140">削除</button>
34   </form>
35 </div>
36</div>

thyda.eiqau

2020/03/03 09:33

インデントに混入している全角スペースは除去して、半角スペースにしてください。

kei344

2020/03/03 09:43

どの要素が効いてどの要素が効かないのか、具体的に提示してください。

kei344

2020/03/03 10:08

どの要素が効かないのか、具体的に提示してください。

kei344

2020/03/04 08:09

エラーは出ていませんか？デベロッパーツールで確認してみてください。https://eng-entrance.com/javascript-display-error

yuki911

2020/03/04 09:41

確認しましたが、エラーは出ていませんでした

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

回答2件

「CSSが適用されない」確認リスト。
0. HTMLの構文が間違っている（当該箇所だけでなくページ全体を確認）
0. CSSのセレクタが適切でない（当該要素を指定できていない） ※1
0. CSSのほかの指定（or他のCSSファイル）で上書きされている ※1
0. HTML/CSSが保存されていない、サーバへのアップロードに失敗している
0. ブラウザに表示している物と別のファイルを編集している（案外よく有る）
0. キャッシュされている（ブラウザ、サーバなど） ※2

※1
【初心者向け！Chromeの検証機能（デベロッパーツール）の使い方】
https://saruwakakun.com/html-css/basic/chrome-dev-tool

※2
【Webブラウザのキャッシュ削除と、スーパーリロード方法一覧 | uzurea.net】
http://uzurea.net/cacheclear-and-superreload-2018/

投稿2020/03/04 10:15

kei344

総合スコア69606

yuki911

2020/03/04 11:18

全て確認しまいしたが、異常はなかったと思います。一つ気になったことは、デベロッパーツールのhover時やactive時のCSSをチェックのとこで、hoverにチェックを入れたのですが、hoverのcss は出てきませんでした（他のボタンでは出てきました）。

kei344

2020/03/04 11:35

ではCSSが違うのでしょう。

yuki911

2020/03/04 15:46

そうなのでしょうか片方で効いてて片方で効かないのでhtmlかとも思いましたが、そちらも問題なさそうなので、、、 buttonにz-index: 1;をしているので隠れてたりしてはいないのですが

kei344

2020/03/04 16:33

「ちゃんとできている」と言うのが一番疑うべき部分です。デベロッパーツールでスタイルシートを確認して、編集が反映されるかを確認してください。background-colorなど一見して分かる箇所を作ってください。両方のページについてCSSの編集が問題なく反映されていることが確認できたら、対象スタイルと無関係なHTML要素を順番に削除してください。<div class="button">とその中身が残った状態で、まだ反映されないなら、その部分を全削除して、一から書き直してください。

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

ベストアンサー

おそらく「編集」とか「削除」をマウスオーバーしたときに色を変える処理のことをおっしゃっているのだと思いますが、ご提示のコードを結合させ (てインデントを直し) ただけの下記のコードで問題なく動いているように見えますので、threads.php以外のファイルでご提示のCSSを正常に読み込んでいるか確認してください。

html
1<!DOCTYPE html>
2<meta charset="utf-8">
3<title></title>
4<style>
5h1,h2,form{
6  text-align:center;
7}
8
9body,form{
10  margin:0;
11}
12
13a{
14  color:blue;
15}
16
17.error{
18  text-align:center;
19  color:red;
20}
21
22button{
23  display: inline-block;
24  padding: 0.3em 1em;
25  text-decoration: none;
26  color: #67c5ff;
27  border: solid 1px #67c5ff;
28  border-radius: 3px;
29  transition: .4s;
30  outline:none;
31}
32
33.button{
34  display:block;
35}
36
37.button :hover{
38  background: #67c5ff;
39  color: white;
40}
41
42.flexbox{
43  display:flex;
44}
45
46.posts{
47  background-color:#ffeecc;
48  width:100%;
49}
50
51.posts:hover{
52  background:#ffee;
53}
54
55.posts a{
56  display:flex;
57  height:100%;
58  justify-content:center;
59  align-items:center;
60}
61
62.posts p{
63  display:flex;
64  height:100%;
65  justify-content:center;
66  align-items:center;
67  margin-top: 0;
68}
69</style>
70
71<h1>boards.php</h1>
72<form action="" method="post">
73  <label for="title">タイトル</label><br>
74  <input type="text" name="title" id="title"><br>
75  <button type="submit">部屋を立てる</button>
76  <input type="hidden" name="token" value="">
77</form>
78
79<div class="flexbox">
80  <div class="posts">
81    <a href="threads.php"></a>
82  </div>
83  <div class="button">
84    <form action="change.php" method="get">
85      <button type="submit" name="boards_id" value="">編集</button>
86    </form>
87    <form action="delete.php" method="get">
88      <button type="submit" name="boards_id" value="">削除</button>
89    </form>
90  </div>
91</div>
92
93<h1>threads.php</h1>
94<form action="" method="post">
95  <textarea name="comment" rows="8" cols="80"></textarea><br>
96  <input type="hidden" name="token" value="">
97  <button type="submit">送信</button>
98</form>
99
100<div class="flexbox">
101  <div class="posts">
102    <p></p>
103  </div>
104  <div class="button">
105    <form action="change.php" method="get">
106      <button type="submit" name="threads_id" value="">編集</button>
107      <input type="hidden" name="board_id" value="">
108    </form>
109    <form action="delete.php" method="get">
110      <button type="submit" name="threads_id" value="">削除</button>
111    </form>
112  </div>
113</div>

Mar 5, 2020 2:00am 追記
HTMLの構文が間違っています。kei344さんの回答で指摘されている「HTMLの構文が間違っている（当該箇所だけでなくページ全体を確認）」に対して、「異常はなかった」とおっしゃっていますが、何をもってそうお考えになったのでしょうか。

間違ったコードを書いても、ブラウザは親切にある程度頑張ってHTMLとして解釈しようとしてくれてそれっぽく描画されますが、そもそも間違っているわけですから期待通りの動作をする保証はありません。
Chromeで確認した限りですが、今回のご申告の内容はDOCTYPE宣言を入れるだけで治りました。

ほか、気になったところ。

<h1> と <h2> は </head> の中には入りません。 <body> の中に入れてください。
おそらく、CSSのセレクタの理解が足りていないと思います。次の4つはまったく別の要素を指している、ということがおわかりになりますでしょうか。
1. button { /* ... */ }
2. .button { /* ... */ }
3. .button:hover { /* ... */ }
4. .button :hover { /* ... */ }
<br> は文章を改行するためのものであって、レイアウトを整えるためのものではありません。

投稿2020/03/03 09:46

編集2020/03/04 16:59

thyda.eiqau

総合スコア2982

yuki911

2020/03/03 10:17

編集、削除ボタンのホバーのことでした。提示いただいたコードをコピペしました。 thrads.phpでは、思い通りの動作をしましたが、 boards.phpでは、提示いただいたコードをコピペしても治りませんでした。

thyda.eiqau

2020/03/03 11:54

動作に違いがあることまでわかっているのですから次にやるべきなのは、その2つのファイルのコードにどのような違いがあるのか探すことですね。それらの2つをブラウザで開いて、右クリックで「ソースを表示」して、出てくるHTMLを見比べて違いを探してください。

yuki911

2020/03/04 01:15

２つの違いは inputがあるか（消しても治らない） nameが違う（聞いてる方に合わせても治らない）クラスも親クラスも一緒でどこが間違っているかわからないです

thyda.eiqau

2020/03/04 08:01

と、おっしゃられても、私の手元にはthreads.phpもboards.phpも無いので、私には確認できません。次のステップとして、何が必要だとお考えでしょうか？

yuki911

2020/03/04 10:05

２つのコードを貼らせてもらいました。 cssも読み込まれて、boardsのホバーだけがかからない状況です。 thyda様は正常に動いて、自分のは動かないとなると何をどうしていいのかわからないです。

thyda.eiqau

2020/03/04 16:26

2つのファイルでHTMLの構造が全然違うじゃないですか。なぜ嘘をつくのですか？ご提示いただいたHTMLコードで現象確認できましたので、のちほど回答に追記します。

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

あなたの回答

tips

プレビュー

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

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

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

ただいまの回答率
85.35%

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

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

質問する

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

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

ボタンのcssが一部にしか効かない

関連した質問