提示コードですがstyle.cssにメディアクエリを設定してindex.htmlの<headでも設定しているのですが反映されませんこれはなぜでしょうか?メディアクエリ外すとbody以外の全てが反映されます。
メディアクエリを外すと中央揃えとボタンの配色等が有効になるためメディアクエリをつけると反映されません。F5キーを押しても中央揃えが右揃えになりません。またbodyのバックグランドカラーも適用されません。
メディアクエリを外している時
参考サイト: https://www.1000wave.net/9511
index.php
php
<!DOCTYPE html> <html lang=ja> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta charset="utf-8"> <link rel="stylesheet" href="style.css"> <title>send</title> </head> <body> <?php session_cache_limiter('none'); session_start(); session_regenerate_id(true); ini_set("display_errors",1); error_reporting(E_ALL); require_once "dataBase.php"; //echo GetUUID()."<br>"; ?> <!-- ログアウトアイコン --> <?php if(isset($_SESSION['login']) == true) { ?> <!-- ログイン中 --> <form action="logout.php" method="post"> <button type="submit"> ログアウト </button> </form> <form action="newThread.php" method="post"> <button type="submit"> スレッドを立てる </button> </form> <form action="profile.php?ID=<?php echo $_SESSION["id"] ?>" method="post"> <button type="submit" name="submit"> プロフィール </button> </form> <?php } ?> <div class="searchBar"> <h1 > 掲示板 </h1> <!-- 検索 --> <form action="search.php" method="post"> <input type="search" name="name"><br> <button type="submit" name="submit"> 検 索 </button> <br> </form> </div> <br> <?php try { $dsn = 'mysql:dbname=Bulletin_Board;host=localhost;charset=utf8'; $dbh = new PDO($dsn,"root","Shigurechan7240"); $dbh->setAttribute(PDO::ATTR_ERRMODE,PDO::ERRMODE_EXCEPTION); $sql = 'SELECT * FROM Thread'; $stmt = $dbh->prepare($sql); $stmt->execute(); } catch(PDOException $e) { die($e->getMessage()); } ?> <?php if(isset($_SESSION['login']) == false) { ?> <form class="center" action="register.php" method="post"> <button type="submit"> 登録 </button> </form> <form class="center" action="login.php" method="post"> <button type="submit"> ログイン </button> </form> <?php } try { $dsn = 'mysql:dbname=Bulletin_Board;host=localhost;charset=utf8'; $dbh = new PDO($dsn,"root","Shigurechan7240"); $dbh->setAttribute(PDO::ATTR_ERRMODE,PDO::ERRMODE_EXCEPTION); $sql = 'SELECT * FROM Thread WHERE `enable`=true ORDER BY post_count DESC'; $stmt = $dbh->prepare($sql); $stmt->execute(); $result = $stmt->fetchAll(); } catch(PDOException $e) { die($e->getMessage()); } ?> <div class="threadList"> <?php for($i = 0; $i < $stmt->rowCount(); $i++) { ?> <!-- 人気スレッドを表示 --> <a href="thread.php?title=<?php echo $result[$i]["ID"] ?>"> <?php echo $result[$i]["name"] ?> </a> <?php if($i == 20) { ?> <h1> これ以上表示出来ません検索を利用してください。 </h1> <?php break; } } ?> </div> </body> </html>
style.css
css
@media screen and(min-width: 641px) { .threadList { text-align: center; } .p { color: #C0C0C0; font-size: 20px; } .p_rightButon { display: inline; } .form { white-space: nowrap; display: inline; } .searchBar { text-align: center; } .button.right { text-align: right; } .h6 { color: #C0C0C0; } .h5 { color: #C0C0C0; } .h4 { color: #C0C0C0; } .h3 { color: #C0C0C0; } .h2 { color: #C0C0C0; } .h1 { color: #C0C0C0; } .threadTopBar { color: #C0C0C0; text-align: center; } a { text-decoration: none; font-size: 20px; color: #2096F3; } a:hover { text-decoration: underline; } .input[type=button] { width:100px; background-color:#2096F3; color:#fff; padding: 15px; border-radius: 3px; box-shadow: 0 0 8px rgba(0,0,0,0.4); } textarea { height:100px; } /* アスキーアート入力フォーム */ textarea.asciiArt { resize: none; width: 100%; } button { height:30px; width: 150px; background-color:#2096F3; color:#fff; display: inline-block; border-radius: 3px; box-shadow: 0 0 8px rgba(0,0,0,0.4); } .deleteButton { display: inline-block; height:30px; width: 60px; background-color:#FF0000; color:#fff; border-radius: 3px; box-shadow: 0 0 8px rgba(0,0,0,0.4); } .postSelect { display:inline-block; } .goodButton { text-align: left; display:inline-block; height:30px; width: 100px; background-color:#FFFF00; color:#000000; } .goodButtonThread { text-align: left; height:30px; width: 100px; background-color:#FFFF00; color:#000000; } .searchBar { text-align: center; } .body { background-color: #15202B; } }
何も解決してないのに理解してないのにあちこち手を付けるから何も身につかないだけの話。
そんなマルチで対応できるほどの基礎出来てないでしょ。

screenのwidthが1024pxを超えた場合の定義がないので、適用されていないっていうだけでは? 表示中のwebブラウザの幅を変えて確かめるとか、ChromeのDevToolsで表示デバイスをシミュレーションすることによって幅を変えてみるなどしていますか?
@media screen and (min-width:641px)
としましたが動作しません。またdevToolにてウインドウのサイズを変更しましたが変わりません。

そもそも、そのcssは読み込まれているのかどうか。 style.css としてそのhtmlと同じ場所に保存されているのか。
はい。保存されていました。名前はstyle.cssです。確認しました。
「読み込まれているか」の証拠がないです。
「適用されません」とのことですが、具体的にはどのような現象を見て、適用されていないな、と感じたのですか?
「更新されません」とのことですが、具体的にはどのような現象を見て、更新されていないな、と感じたのですか?
誤字です。
どちらでもいいのできちんと説明を。言葉が難しいなら画面イメージで
「適用されません」とのことですが、具体的にはどのような現象を見て、適用されていないな、と感じたのですか?
「更新されません」とのことですが、具体的にはどのような現象を見て、更新されていないな、と感じたのですか?
メディアクエリを外すと中央揃えとボタンの配色等が有効になるためメディアクエリをつけると反映されません。更新されませんはF5キーを押しても中央揃えが右揃えになりません。またbodyのバックグランドカラーも適用されません。
具体的にはどのような現象を見て
と聞いてるのですが。
あなたがどうなると思っているかを聞いているわけではないです
cssが一切反映されなくなるという状況です、メディアクエリをつけると何もかも反映されません
@media screen and(min-width: 641px)
これはなんのために入れたんですか?
どのような効果があるか理解して入れたんですよね?
仕様確認のみの依頼で解決されていて、本当に理解したかわからないので、フィードバックしてください。
「なぜ解決できるのか」
コードこうしたからなおった
だけでは不十分で、これまでと同じです。
まだ回答がついていません
会員登録して回答してみよう