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

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

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

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

CSS

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

Q&A

解決済

1回答

444閲覧

htmlの検索フォームにcssを適用させたいです。

fsdfsa

総合スコア11

HTML

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

CSS

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

1グッド

0クリップ

投稿2023/06/02 02:19

編集2023/06/02 12:24

実現したいこと

htmlの検索フォームにcssを適用させたいです。

前提

#searchのcssは適用されていますが、それ以外のcssが適用されないです。

該当のソースコード

html

1 <body> 2 3 <header> 4 5 <div class="icon"> 6 <a href="#"> 7 <img src="./img/DAWN_icon.png" alt="icon"> 8 </a> 9 </div> 10 11 <h1>リストの表示<br><span class="sub">-list-</span></h1> 12 13 </header> 14 15 <div id="content"> 16 17 <table style="border-collapse: separate"> 18 19 <tr> 20 <th class="id">ID</th> 21 <th class="name">NAME</th> 22 <th class="mail">MAIL</th> 23 <th class="up">EDIT</th> 24 <th class="dele">DELETE</th> 25 </tr> 26 27<?php 28if (isset($_POST["search"])){//検索ボタンが押された場合 29 30if (isset($_POST["search_name"]))//検索した場合 31{ 32$search_name = $_POST["search_name"]; 33$sql="SELECT * FROM users WHERE username like '%{$search_name}%'"; 34$stmt2 = $pdo->prepare($sql); 35$stmt2->execute(); 36$stmt2_list = $stmt2->fetchAll(PDO::FETCH_ASSOC);} 37?> 38 <div class="create_btn"> 39 <button> 40 <a href="list.php"><i class="fas fa-plus-circle"> 一覧表示へ戻る</i></a> 41 </button> 42 </div> 43 44<?php 45 46} 47 48// 検索しなかった場合 49else { 50 51 foreach ($result as $list) { ?> 52<tr> 53 54 <td class="id"><?php echo htmlspecialchars($list["id"]); ?></td> 55 <td class="name"><?php echo htmlspecialchars($list["username"]); ?></td> 56 <td class="mail"><?php echo htmlspecialchars($list["mail"]); ?></td> 57 <td class="up"> 58 <a href="update_form.php?id=<?php echo $list["id"]?>&username=<?php echo $list["username"]?>&mail=<?php echo $list["mail"] ?>"> 59 <i class="fas fa-file-alt"></i></a> 60 </td> 61 <td class="dele"> 62 <a href="delete.php?id=<?php echo htmlspecialchars($list["id"]); ?>"onclick="return confirm('このレコードを削除します。よろしいでしょうか?')"> 63 <i class="fas fa-trash-alt"></i> </a> 64 65</td> 66 67 </tr> 68 69 <?php } ?> 70 71 72 <div class="create_btn"> 73 74 <button> 75 <a href="create_form.php"><i class="fas fa-plus-circle"> 新規登録はこちら</i></a> 76 </button> 77 78 </div> 79 80 81<?php } ?> 82 83<!-- 検索した場合のリスト表示 --> 84<?php foreach ($stmt2_list as $serch) { ?> 85 86<tr> 87 88<td class="id"><?php echo $serch['id'];?></td> 89<td class="name"><?php echo $serch['username'];?></td> 90<td class="mail"><?php echo $serch['mail'];?></td> 91 <td class="up"> 92 <a href="update_form.php?id=<?php echo $serch["id"]; ?>"> 93 <i class="fas fa-file-alt"></i></a> 94 </td> 95<td class="dele"> 96 <a href="delete.php?id=<?php echo htmlspecialchars($serch["id"]); ?>"onclick="return confirm('このレコードを削除します。よろしいでしょうか?')"> 97 <i class="fas fa-trash-alt"></i> </a> 98 </td> 99 100</tr> 101 102<?php } ?> 103 104 105 <!-- 検索ファーム --> 106 107 108<div id="search"> 109<form action="list.php" method="post"></form> 110 <input type="text" name="search_name" placeholder="ユーザー名で検索" > 111 <input type="submit" name="search" value=検索 112 > 113</form> 114 115</div> 116 117</table> 118 119 120</body> 121 122</html>

css

1@charset "utf-8"; 2 3body { 4 background: #d5ecfc; 5 color: rgb(80, 80, 80); 6} 7 8h1 { 9 text-align: center; 10 font-size: 24px; 11 color: #fff; 12 background: #04489b; 13 padding: 15px; 14 line-height: 1rem; 15} 16 17a { 18 text-decoration: none; 19} 20 21input { 22 padding-left: 3px; 23 border: 0.5px solid rgb(146, 146, 146); 24 border-radius: 3px; 25 display: block; 26} 27 28#content { 29 margin: 15px auto !important; 30 overflow: hidden; 31} 32 33table { 34 max-width: 520px; 35} 36 37td { 38 padding: 5px; 39 font-size: 14px; 40 text-align: center; 41 margin: 0; 42} 43 44.name { 45 width: 150px; 46} 47 48.pass { 49 width: 150px; 50} 51 52.up { 53 width: 100px; 54} 55 56.dele { 57 width: 100px; 58} 59 60.var_dump { 61 padding: 15px; 62 background: rgb(224, 255, 224); 63 font-size: 16px; 64} 65 66.return { 67 width: 800px; 68 text-align: left; 69 margin: 30px auto 0; 70 display: block; 71} 72 73h2 { 74 margin-bottom: 30px; 75 ; 76} 77 78 79/* ============================================== 80 Design Plus 81================================================*/ 82 83 84/* ===================common====================== */ 85 86header .icon:hover { 87 opacity: 0.8; 88} 89 90body { 91 background: url(../img/bg.jpg) no-repeat; 92 background-color: rgba(255, 255, 255, 0.7); 93 background-blend-mode: lighten; 94 background-size: cover; 95} 96 97#content { 98 max-width: 900px; 99} 100 101form h2 { 102 padding: 60px 0; 103 font-size: 1.2rem; 104 text-align: center; 105} 106 107.return { 108 width: 100%; 109 margin: 0; 110} 111 112span.strong { 113 font-size: 1.3em; 114} 115 116span.orange { 117 color: #e2563b; 118 font-size: 35px; 119} 120 121 122/*heder*/ 123 124header { 125 background: -moz-linear-gradient(to bottom, #7b9bc7, #e9cfd4); 126 background: -webkit-linear-gradient(to bottom, #7b9bc7, #e9cfd4); 127 background: linear-gradient(to bottom, #7b9bc7, #e9cfd4); 128 display: flex; 129 flex-direction: row; 130 position: relative; 131} 132 133header .icon { 134 width: 100px; 135 margin: 19px 19px 0; 136 text-align: center; 137 position: absolute; 138} 139 140header .icon img { 141 width: 100%; 142} 143 144header h1 { 145 width: 100%; 146 background: none; 147 line-height: 1.1; 148} 149 150header h1 span.sub { 151 font-size: 0.7em; 152} 153 154 155/* ===================list====================== */ 156 157 158/*create_btn*/ 159 160.create_btn { 161 margin: 0 auto 20px; 162 padding-top: 20px; 163 font-size: 14pt; 164} 165 166.create_btn button { 167 margin: 0; 168 position: relative; 169} 170 171.create_btn a { 172 font-weight: bold; 173 color: #e2563b; 174} 175 176.create_btn a:hover { 177 opacity: 0.7; 178} 179 180 181/*!empty_return*/ 182 183p.return_empty a { 184 font-weight: bold; 185 color: #e2563b; 186} 187 188p.return_empty { 189 padding-bottom: 30px; 190} 191 192 193/*search*/ 194 195#search { 196 float: right; 197 width: 30%; 198 border-radius: 3px; 199 font-size: 18px; 200} 201 202#search form { 203 position: relative; 204 background: #fff; 205} 206 207#search form input { 208 width: 100%; 209 border-color: #e2563b; 210} 211 212#search form input::placeholder { 213 font-size: 12pt; 214} 215 216#search button { 217 height: 100%; 218 width: 50px; 219 background: #e2563b; 220 color: #fff; 221 top: 0; 222 right: 0; 223 position: absolute; 224} 225 226#search button:hover { 227 background: #f0907f; 228} 229 230 231 232/*btn*/ 233 234#search button { 235 border-radius: 0 3px 3px 0; 236} 237 238 239/*list_table*/ 240 241table { 242 border-spacing: 0px 2px; 243 max-width: 65%; 244} 245 246 247/*id_color*/ 248 249tr:nth-child(n+2) .id { 250 background-color: #0083ab; 251 color: #fff; 252} 253 254 255/*Record odd*/ 256 257tr:nth-child(odd) .name, 258tr:nth-child(odd) .mail, 259tr:nth-child(odd) .up, 260tr:nth-child(odd) .dele { 261 background-color: #f5f8fb; 262} 263 264 265/*Record even*/ 266 267tr:nth-child(even) .name, 268tr:nth-child(even) .mail, 269tr:nth-child(even) .up, 270tr:nth-child(even) .dele { 271 background-color: #fff; 272} 273 274 275/*category*/ 276 277tr:first-child .id, 278tr:first-child .name, 279tr:first-child .mail, 280tr:first-child .up, 281tr:first-child .dele { 282 height: 40px; 283 background: #016079; 284 color: #fff; 285 font-size: 0.5em; 286 position: relative; 287} 288 289tr:first-child .id, 290tr:first-child .up, 291tr:first-child .dele { 292 width: 10%; 293} 294 295tr:first-child .mail { 296 width: 40%; 297} 298 299tr:first-child td.id:after, 300tr:first-child td.name:after, 301tr:first-child td.mail:after, 302tr:first-child td.up:after { 303 height: 80%; 304 width: 1px; 305 content: ""; 306 top: 10%; 307 right: 0; 308 position: absolute; 309 background-color: #fff; 310} 311 312 313/*EDIT DELETE_iconColor*/ 314 315tr:nth-child(n+2) .up a, 316tr:nth-child(n+2) .dele a { 317 color: #e2563b; 318 font-size: 1.3em; 319} 320 321tr:nth-child(n+2) .up a:hover, 322tr:nth-child(n+2) .dele a:hover { 323 color: #f0907f; 324 font-size: 1.3em; 325} 326 327tr { 328 margin-bottom: 5px; 329 overflow: hidden; 330} 331 332.update_text { 333 font-size: 35px; 334} 335 336/* ===================form====================== */ 337 338 339/*form_input*/ 340 341.form_input input { 342 width: 300px; 343 background: #fff; 344 border: solid 2px #e2563b; 345 border-radius: 3px; 346} 347 348 349/*username*/ 350 351.form_input .username label { 352 padding-left: 25px; 353 font-weight: bold; 354 color: #0e1d44; 355 position: relative; 356} 357 358.form_input .username label:before { 359 content: ""; 360 width: 20px; 361 height: 30px; 362 bottom: -5px; 363 left: 3px; 364 background: url(../img/icon_man.png) no-repeat; 365 position: absolute; 366} 367 368 369/*mail*/ 370 371.form_input .mail label { 372 padding-left: 35px; 373 font-weight: bold; 374 color: #0e1d44; 375 position: relative; 376} 377 378.form_input .mail label:before { 379 content: ""; 380 width: 30px; 381 height: 30px; 382 bottom: -8px; 383 left: 3px; 384 background: url(../img/icon_mail.png) no-repeat; 385 position: absolute; 386} 387 388.form_input { 389 display: flex; 390 justify-content: center; 391} 392 393.form_input .username, 394.form_input .mail { 395 margin: 0 20px; 396} 397 398.form_btn { 399 padding-top: 60px; 400 display: flex; 401 justify-content: center; 402} 403 404.form_create_btn, 405.form_return_btn { 406 margin: 0 20px; 407} 408 409.form_create_btn:hover, 410.form_return_btn:hover { 411 opacity: 0.7; 412} 413 414.form_create_btn:active, 415.form_return_btn:active { 416 transform: scale(0.95); 417} 418 419 420/*return_btn*/ 421 422p.return { 423 position: relative; 424 background: #b0b4c2; 425 border-radius: 3px; 426} 427 428p.return a { 429 padding: 10px; 430 padding-left: 50px; 431 padding-right: 25px; 432 color: #0e1d44; 433 font-weight: bold; 434 display: block; 435} 436 437p.return a:before { 438 content: ""; 439 width: 30px; 440 height: 25px; 441 background-image: url(../img/arrow_return.png); 442 top: 55%; 443 left: 10%; 444 transform: translate(0, -55%); 445 position: absolute; 446} 447 448 449/*create_btn*/ 450 451.form_create_btn input { 452 border: none; 453 padding: 10px 68px; 454 background-color: #e2563b; 455 color: #fff; 456} 457 458 459.var_dump { 460 461 padding: 15px; 462 463 background: #cef; 464 465 font-size: 16px; 466 467} 468 469 470

試したこと

スペル間違いがないかの確認
入れ子構造が間違っていないかの確認

shinoharat👍を押しています

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

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

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

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

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

hatena19

2023/06/02 02:34

サンプルを作成して確認しましたが、提示のコードでちゃんとCSSは適用されました。 提示されていない部分に原因かあるのでは。 症状を確認できるコード全体を提示してください。
shinoharat

2023/06/02 02:49

私の手元では、問題なく css が適用されますので、質問文に載っているコード以外の部分に原因があるのではないかと思います。 大抵のブラウザには「開発者ツール」が備わっているので、それを使って調べてみてはいかがでしょうか? --------------------- 【開発者ツールの起動方法】 1. 調べたい要素(例えば "ユーザー名で検索" のテキストボックスなど)を右クリックし、コンテキストメニューを表示します。 2. ブラウザごとに名称が異なるのですが、  - MS Edge の場合: 「開発者ツールで調査する」  - Google Chrome の場合: 「検証」  みたいなメニューがあるので、それをクリックします。
fsdfsa

2023/06/02 02:55

コメントありがとうございます。htmlとcss追記させていただきました。 開発者ツール確認してみます。
guest

回答1

0

ベストアンサー

table を閉じる位置がおかしいと思います。
table の直下に置いて良いのは、 caption, thead, tbody, tr, ... など一部のタグのみで、 div を入れてはいけません。

html:こういうのはダメ

1<table> 2 <div></div> 3</table>

table の外に出すか、<td> の中に入れれば問題ありません。

html:OKな例1

1<table> 2</table> 3<div></div>

html:OKな例2

1<table> 2 <tr> 3 <td> 4 <div></div> 5 </td> 6 </tr> 7</table>

【修正例】

diff

1 </tr> 2+ </table> 3 4 <?php } ?> 5 6 7 <!-- 検索ファーム --> 8 9 10 <div id="search"> 11 <form action="list.php" method="post"></form> 12 <input type="text" name="search_name" placeholder="ユーザー名で検索" > 13 <input type="submit" name="search" value=検索 14 > 15 </form> 16 17 </div> 18 19- </table>

投稿2023/06/02 03:01

編集2023/06/02 03:04
shinoharat

総合スコア1674

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

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

fsdfsa

2023/06/02 03:24

ありがとうごさいます。解決いたしました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.51%

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

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

質問する

関連した質問