提示コードですがstyle.cssにメディアクエリを設定してindex.htmlの<headでも設定しているのですが反映されませんこれはなぜでしょうか?メディアクエリ外すとbody以外の全てが反映されます。
メディアクエリを外すと中央揃えとボタンの配色等が有効になるためメディアクエリをつけると反映されません。F5キーを押しても中央揃えが右揃えになりません。またbodyのバックグランドカラーも適用されません。
参考サイト: https://www.1000wave.net/9511
index.php
php
1<!DOCTYPE html> 2<html lang=ja> 3 <head> 4 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> 5 <meta charset="utf-8"> 6 <link rel="stylesheet" href="style.css"> 7 <title>send</title> 8 </head> 9 10 <body> 11 12<?php 13session_cache_limiter('none'); 14session_start(); 15 16session_regenerate_id(true); 17ini_set("display_errors",1); 18error_reporting(E_ALL); 19 20 21require_once "dataBase.php"; 22//echo GetUUID()."<br>"; 23 24?> 25 26 27 28 29<!-- ログアウトアイコン --> 30<?php if(isset($_SESSION['login']) == true) 31{ 32?> 33<!-- ログイン中 --> 34 35 <form action="logout.php" method="post"> 36 <button type="submit"> ログアウト </button> 37 </form> 38 39 <form action="newThread.php" method="post"> 40 <button type="submit"> スレッドを立てる </button> 41 </form> 42 43 <form action="profile.php?ID=<?php echo $_SESSION["id"] ?>" method="post"> 44 <button type="submit" name="submit"> プロフィール </button> 45 </form> 46 47 48<?php 49} 50?> 51 52 53 54 55 56 57<div class="searchBar"> 58<h1 > 掲示板 </h1> 59<!-- 検索 --> 60<form action="search.php" method="post"> 61 <input type="search" name="name"><br> 62 <button type="submit" name="submit"> 検 索 </button> 63 <br> 64</form> 65</div> 66<br> 67 68<?php 69try 70{ 71 $dsn = 'mysql:dbname=Bulletin_Board;host=localhost;charset=utf8'; 72 $dbh = new PDO($dsn,"root","Shigurechan7240"); 73 $dbh->setAttribute(PDO::ATTR_ERRMODE,PDO::ERRMODE_EXCEPTION); 74 $sql = 'SELECT * FROM Thread'; 75 $stmt = $dbh->prepare($sql); 76 $stmt->execute(); 77} 78catch(PDOException $e) 79{ 80 die($e->getMessage()); 81} 82 83 84?> 85 86 87<?php if(isset($_SESSION['login']) == false) 88 { 89?> 90 <form class="center" action="register.php" method="post"> 91 <button type="submit"> 登録 </button> 92 </form> 93 94 <form class="center" action="login.php" method="post"> 95 <button type="submit"> ログイン </button> 96 </form> 97<?php 98} 99 100try 101{ 102 $dsn = 'mysql:dbname=Bulletin_Board;host=localhost;charset=utf8'; 103 $dbh = new PDO($dsn,"root","Shigurechan7240"); 104 $dbh->setAttribute(PDO::ATTR_ERRMODE,PDO::ERRMODE_EXCEPTION); 105 $sql = 'SELECT * FROM Thread WHERE `enable`=true ORDER BY post_count DESC'; 106 $stmt = $dbh->prepare($sql); 107 $stmt->execute(); 108 $result = $stmt->fetchAll(); 109} 110catch(PDOException $e) 111{ 112 die($e->getMessage()); 113} 114?> 115 116<div class="threadList"> 117<?php 118for($i = 0; $i < $stmt->rowCount(); $i++) 119{ 120?> 121 122 <!-- 人気スレッドを表示 --> 123 <a href="thread.php?title=<?php echo $result[$i]["ID"] ?>"> <?php echo $result[$i]["name"] ?> </a> 124 125<?php 126 if($i == 20) 127 { 128?> 129 130 <h1> これ以上表示出来ません検索を利用してください。 </h1> 131 132<?php 133 break; 134 } 135} 136?> 137</div> 138 139 140 141</body> 142 143</html> 144
style.css
css
1@media screen and(min-width: 641px) 2{ 3 4 5 .threadList 6 { 7 text-align: center; 8 9 } 10 11 12 .p 13 { 14 color: #C0C0C0; 15 font-size: 20px; 16 17 } 18 19 .p_rightButon 20 { 21 display: inline; 22 } 23 24 .form 25 { 26 white-space: nowrap; 27 display: inline; 28 } 29 30 .searchBar 31 { 32 text-align: center; 33 } 34 35 36 .button.right 37 { 38 text-align: right; 39 } 40 41 42 .h6 43 { 44 color: #C0C0C0; 45 } 46 47 48 .h5 49 { 50 color: #C0C0C0; 51 } 52 53 .h4 54 { 55 color: #C0C0C0; 56 } 57 58 .h3 59 { 60 color: #C0C0C0; 61 62 } 63 64 .h2 65 { 66 color: #C0C0C0; 67 68 } 69 70 .h1 71 { 72 color: #C0C0C0; 73 74 } 75 76 .threadTopBar 77 { 78 79 color: #C0C0C0; 80 text-align: center; 81 } 82 83 a 84 { 85 text-decoration: none; 86 font-size: 20px; 87 color: #2096F3; 88 } 89 90 a:hover 91 { 92 text-decoration: underline; 93 } 94 95 96 .input[type=button] 97 { 98 99 100 101 width:100px; 102 background-color:#2096F3; 103 color:#fff; 104 padding: 15px; 105 border-radius: 3px; 106 box-shadow: 0 0 8px rgba(0,0,0,0.4); 107 108 } 109 110 textarea 111 { 112 113 height:100px; 114 } 115 116 /* アスキーアート入力フォーム */ 117 textarea.asciiArt 118 { 119 resize: none; 120 width: 100%; 121 } 122 123 124 button 125 { 126 127 height:30px; 128 width: 150px; 129 background-color:#2096F3; 130 color:#fff; 131 display: inline-block; 132 133 border-radius: 3px; 134 box-shadow: 0 0 8px rgba(0,0,0,0.4); 135 } 136 137 138 139 .deleteButton 140 { 141 142 display: inline-block; 143 height:30px; 144 width: 60px; 145 background-color:#FF0000; 146 color:#fff; 147 148 border-radius: 3px; 149 box-shadow: 0 0 8px rgba(0,0,0,0.4); 150 } 151 152 .postSelect 153 { 154 display:inline-block; 155 } 156 157 .goodButton 158 { 159 text-align: left; 160 display:inline-block; 161 162 height:30px; 163 width: 100px; 164 background-color:#FFFF00; 165 color:#000000; 166 167 168 } 169 170 171 172 .goodButtonThread 173 { 174 text-align: left; 175 176 height:30px; 177 width: 100px; 178 background-color:#FFFF00; 179 color:#000000; 180 181 182 } 183 184 .searchBar 185 { 186 text-align: center; 187 } 188 189 .body 190 { 191 background-color: #15202B; 192 193 194 } 195}
何も解決してないのに理解してないのにあちこち手を付けるから何も身につかないだけの話。
そんなマルチで対応できるほどの基礎出来てないでしょ。
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)
これはなんのために入れたんですか?
どのような効果があるか理解して入れたんですよね?
仕様確認のみの依頼で解決されていて、本当に理解したかわからないので、フィードバックしてください。
「なぜ解決できるのか」
コードこうしたからなおった
だけでは不十分で、これまでと同じです。
回答2件
あなたの回答
tips
プレビュー