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

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

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

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

CSS

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

Q&A

解決済

2回答

1554閲覧

html css @media screenが反映されない原因が知りたい。

退会済みユーザー

退会済みユーザー

総合スコア0

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

CSS

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

0グッド

0クリップ

投稿2022/02/19 03:32

編集2022/02/24 14:10

提示コードですが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}

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

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

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

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

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

m.ts10806

2022/02/19 04:30

何も解決してないのに理解してないのにあちこち手を付けるから何も身につかないだけの話。 そんなマルチで対応できるほどの基礎出来てないでしょ。
退会済みユーザー

退会済みユーザー

2022/02/19 06:15 編集

screenのwidthが1024pxを超えた場合の定義がないので、適用されていないっていうだけでは? 表示中のwebブラウザの幅を変えて確かめるとか、ChromeのDevToolsで表示デバイスをシミュレーションすることによって幅を変えてみるなどしていますか?
退会済みユーザー

退会済みユーザー

2022/02/19 06:32

@media screen and (min-width:641px) としましたが動作しません。またdevToolにてウインドウのサイズを変更しましたが変わりません。
退会済みユーザー

退会済みユーザー

2022/02/19 06:55 編集

そもそも、そのcssは読み込まれているのかどうか。 style.css としてそのhtmlと同じ場所に保存されているのか。
退会済みユーザー

退会済みユーザー

2022/02/19 07:21

はい。保存されていました。名前はstyle.cssです。確認しました。
m.ts10806

2022/02/19 07:24

「読み込まれているか」の証拠がないです。
Lhankor_Mhy

2022/02/21 01:12

「適用されません」とのことですが、具体的にはどのような現象を見て、適用されていないな、と感じたのですか? 「更新されません」とのことですが、具体的にはどのような現象を見て、更新されていないな、と感じたのですか?
退会済みユーザー

退会済みユーザー

2022/02/23 08:29 編集

誤字です。
m.ts10806

2022/02/23 08:36

どちらでもいいのできちんと説明を。言葉が難しいなら画面イメージで
m.ts10806

2022/02/23 09:34

「適用されません」とのことですが、具体的にはどのような現象を見て、適用されていないな、と感じたのですか? 「更新されません」とのことですが、具体的にはどのような現象を見て、更新されていないな、と感じたのですか?
退会済みユーザー

退会済みユーザー

2022/02/24 04:07

メディアクエリを外すと中央揃えとボタンの配色等が有効になるためメディアクエリをつけると反映されません。更新されませんはF5キーを押しても中央揃えが右揃えになりません。またbodyのバックグランドカラーも適用されません。
m.ts10806

2022/02/24 04:10

具体的にはどのような現象を見て と聞いてるのですが。 あなたがどうなると思っているかを聞いているわけではないです
退会済みユーザー

退会済みユーザー

2022/02/24 04:17

cssが一切反映されなくなるという状況です、メディアクエリをつけると何もかも反映されません
m.ts10806

2022/02/24 04:30

@media screen and(min-width: 641px) これはなんのために入れたんですか? どのような効果があるか理解して入れたんですよね?
m.ts10806

2022/02/24 04:58 編集

仕様確認のみの依頼で解決されていて、本当に理解したかわからないので、フィードバックしてください。 「なぜ解決できるのか」 コードこうしたからなおった だけでは不十分で、これまでと同じです。
guest

回答2

0

バリデータにかけたところ、一行目からCSSの構文エラーが出てるので
仕様を重々確認してどこが仕様通りでないか検証してください。
https://developer.mozilla.org/ja/docs/Web/CSS/Media_Queries/Using_media_queries

大文字小文字、スペースの有無でも意味が変わります。

なお、毎度のことながら自身が提示した参考サイト通りにやってないので、できないのは当然と断言しておきます。

投稿2022/02/24 04:40

編集2022/02/24 04:43
m.ts10806

総合スコア80765

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

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

退会済みユーザー

退会済みユーザー

2022/02/24 05:05

@media screen and(min-width: 641px){ 部ですがandの後にスペースが入っていませんでした。 正しくは[@media screen and (min-width: 641px){ ]です。
m.ts10806

2022/02/24 05:10

ではなぜ今回の問題が起きたのか、なぜそれで解決したのか理解してますか? 「スペースがなかったから」だけが理由だと同じミスを繰り返し、同じ質問を繰り返し、赤の他人に指摘され続けることになります。 毎度のことながら普通にやれば起きてない問題を自ら引き起こして問題だと騒いでいるように見えます。
guest

0

ベストアンサー

補足依頼に応答いただけなかったので、想像で回答しますが、おそらくCSS詳細度の影響でご提示いただいていない部分のCSSに上書きされているのだと思います。

100年後も崩れないCSS勉強会 · 第1回「詳細度」

投稿2022/02/22 02:06

Lhankor_Mhy

総合スコア35871

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

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

退会済みユーザー

退会済みユーザー

2022/02/23 08:39 編集

誤字です。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問