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

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

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

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

CSS

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

受付中

メディアクエリが一部反映されない

poketatsu
poketatsu

総合スコア15

HTML

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

CSS

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

2回答

0リアクション

0クリップ

177閲覧

投稿2022/09/04 08:37

編集2022/09/04 09:07

実現したいこと

メディアクエリを反映したいときに、.hyoujiの768px以上までは反映するのですが、
.hyoujiの420px以上のとこが反映されません。

発生している問題・エラーメッセージ

イメージ説明
イメージ説明

.hyoujiのメディアクエリが420px以上のとこが反映されません。 PCのウインドウのサイズは420px以上で反映するのですが、 Dimensions Responsiveのほうで420px以上で設定すると反映されないです。

該当のソースコード

HTML

<!DOCTYPE HTML> <html> <head> <meta charset='UTF-8'> <meta name=”viewport” content=”width=device-width,initial-scale=1.0″> <title>確認画面</title> <style type="text/css"> *{ padding: 0; margin: 0; } .icon2{ /* margin-top:200px; */ width: 200px; margin-left: 100px; } @media screen and (min-width:420px) { .icon2{ /* margin-top:200px; */ width: 200px; margin-left: 200px; } } @media screen and (min-width:768px) { .icon2{ /* margin-top:200px; */ width: 200px; margin-left: 400px; } } @media screen and (min-width:1024px) { .icon2{ /* margin-top:200px; */ width: 200px; margin-left: 400px; } } .contents_box{ width: 400px; height: 150px; background-color: aquamarine; overflow: scroll; } .kakunin{ text-align:center; } .hensuu{ border: double 5px; /* font-size:20px; */ font-weight:bold; width: 450px; height: 800px; background-color:#f5deb3; margin:0 auto; } @media screen and (min-width:768px) { .hensuu{ border: double 5px; /* font-size:20px; */ font-weight:bold; width: 600px; height: 800px; background-color:#f5deb3; } } @media screen and (min-width:1024px) { .hensuu{ border: double 5px; /* font-size:20px; */ font-weight:bold; width: 700px; height: 800px; background-color:#f5deb3; margin:0 auto; } } .btn{ text-align: center; margin-top:50px; } .sousin{ width:100px; } @media screen and (min-width:420px) { .sousin{ font-size:20px; margin-top:200px; width:100px; } } @media screen and (min-width:768px) { .sousin{ font-size:20px; margin-top:100px; width:100px; } } @media screen and (min-width:1025px) { .sousin{ font-size:20px; margin-top:100px; width:100px; } } .modoru{ width:100px; font-size:20px; margin-bottom:100px; } @media screen and (min-width:768px) { .modoru{ font-size:20px; margin-top:100px; width:100px; } } @media screen and (min-width:1025px) { .modoru{ font-size:20px; margin-top:100px; width:100px; } } .hyouji{ margin-left: 0px; font-size:20px; font-weight:bold; } @media screen and (max-width:420px) { .hyouji { margin-left: 0px; font-size:20px; font-weight:bold; } } @media screen and (min-width:768px) { .hyouji{ margin-left:100px; font-size:30px; font-weight:bold; } } @media screen and (min-width:1024px) { .hyouji{ margin-left:100px; font-size:30px; font-weight:bold; } } /* body{ margin-top: 0 auto; } */ footer{ position: fixed; bottom: 0; background-color: darkcyan; width: 100%; text-align: center; color: darkgray; padding: 20px 0; font-size: 30px; } </style> </head> <body> <div class="hensuu"> <img src="アンケート.png" class="icon2"> <h1 class="kakunin">確認</h1> <div class="hyouji" > <span id="name">名前: <?php echo $name; ?> </span> <br> <span>性別: <?php echo $seibetsu; ?> </span> <br> <span>電話番号: <?php echo $tel; ?> </span> <br> <span>郵便番号: <?php echo $yuubin; ?> </span> <br> <span>都道府県: <?php echo $region; ?> </span> <br> <span>地区町村: <?php echo $locality; ?> </span> <br> <span>町名番地: <?php echo $banti; ?> </span> <br> <span>メール: <?php echo $mail; ?> </span> <br> <span>感想:<br> <?php echo nl2br($textarea); ?> </span> <br> </div> <form action='http://localhost/basic/complete.php' method='POST'> <div class="btn"> <input type='button' class="modoru" onclick='history.back()' value='戻る'> <input type='submit' class="sousin" value='送信'> </div> </div> </br> </br> </form> <footer> <p>&copy;2022 ABCDE</p> </footer> </body> </html>

試したこと

margi-leftを0にしたり、上下左右にmargin:auto auto auto 0;などにした。

補足情報(FW/ツールのバージョンなど)

1週間くらい悩みましたがわからなかったです!
お手柔らかにお願いします!

以下のような質問にはリアクションをつけましょう

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

リアクションが多い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

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

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

アカウントをお持ちの方は

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

ただいまの回答率
86.12%

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

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

質問する

関連した質問

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

HTML

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

CSS

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