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

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

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

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

CSS

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

Q&A

解決済

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

yuki911
yuki911

総合スコア27

HTML

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

CSS

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

2回答

0グッド

0クリップ

234980閲覧

投稿2020/03/03 09:22

編集2020/03/04 09:49

ボタンホバーの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>

以下のような質問にはグッドを送りましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

グッドが多くついた質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

thyda.eiqau

2020/03/03 09:33

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

2020/03/03 09:43

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

2020/03/03 10:08

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

2020/03/04 09:41

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

回答2

1

「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

総合スコア69029

thyda.eiqau👍を押しています

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

下記のような回答は推奨されていません。

  • 間違っている回答
  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

回答へのコメント

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">とその中身が残った状態で、まだ反映されないなら、その部分を全削除して、一から書き直してください。

1

ベストアンサー

おそらく「編集」とか「削除」をマウスオーバーしたときに色を変える処理のことをおっしゃっているのだと思いますが、ご提示のコードを結合させ (てインデントを直し) ただけの下記のコードで問題なく動いているように見えますので、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

総合スコア2980

kei344👍を押しています

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

下記のような回答は推奨されていません。

  • 間違っている回答
  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

回答へのコメント

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

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

2020/03/04 08:01

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

2020/03/04 10:05

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

2020/03/04 16:26

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

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

ただいまの回答率
86.02%

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

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

質問する

関連した質問

同じタグがついた質問を見る

HTML

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

CSS

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