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

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

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

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

CSS

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

解決済

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

samidare_chan
samidare_chan

総合スコア142

HTML5

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

CSS

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

2回答

-3評価

0クリップ

487閲覧

投稿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

<!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; } }

良い質問の評価を上げる

以下のような質問は評価を上げましょう

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

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

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

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

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

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

m.ts10806

2022/02/19 04:30

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

退会済みユーザー

2022/02/19 06:15 編集

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

2022/02/19 06:32

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

退会済みユーザー

2022/02/19 06:55 編集

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

2022/02/19 07:21

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

2022/02/19 07:24

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

2022/02/21 01:12

「適用されません」とのことですが、具体的にはどのような現象を見て、適用されていないな、と感じたのですか? 「更新されません」とのことですが、具体的にはどのような現象を見て、更新されていないな、と感じたのですか?
m.ts10806

2022/02/23 08:36

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

2022/02/23 09:34

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

2022/02/24 04:07

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

2022/02/24 04:10

具体的にはどのような現象を見て と聞いてるのですが。 あなたがどうなると思っているかを聞いているわけではないです
samidare_chan

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 編集

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

まだ回答がついていません

会員登録して回答してみよう

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

ただいまの回答率
87.20%

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

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

質問する

関連した質問

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

HTML5

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

CSS

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