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

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

新規登録して質問してみよう
ただいま回答率
87.20%
レスポンシブWebデザイン

レスポンシブWebデザイン(RWD)は、スクリーンのサイズ、プラットフォーム、オリエンテーションに基づいて様々なデバイスで最適のサイトを生成するのウェブデザインとその開発のアプローチ方法を呼びます。

HTML

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

CSS

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

解決済

メディアクエリが機能しない

nyaaa6
nyaaa6

総合スコア0

レスポンシブWebデザイン

レスポンシブWebデザイン(RWD)は、スクリーンのサイズ、プラットフォーム、オリエンテーションに基づいて様々なデバイスで最適のサイトを生成するのウェブデザインとその開発のアプローチ方法を呼びます。

HTML

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

CSS

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

1回答

0評価

0クリップ

948閲覧

投稿2019/07/29 02:22

編集2022/01/12 10:58

viewportを設定しているのですがメディアクエリが機能せず原因がわかりません。viewportを記載しているか、メディアクエリの記述が間違っているのかなどを調べましたが、それ以外の原因なのでしょうか。

html

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>ご利用アンケート</title> <link rel="stylesheet" href="css/reset.css"> <link rel="stylesheet" href="css/style.css"> </head> <body> <div class="container"> <header> <div class="row"> <div class="col-sm-6"> <h1>ご利用アンケート</h1> </div> <div class="col-sm-6 align-right"> <a href="/">HOMEへ戻る</a> </div> </div> </header> </div> <hr> <div class="container" <form action="http://book.h2o-space.com/html/form.php" mthod="post"> <div class="col-sm-8 col-sm-offset-2"> <p> この度は、本書をご利用頂きありがとうございます。恐れ入りますが、以下のフォームにご記入いただき、送信して頂けると幸いです。 </p> <div class="form-group"> <label for="name"><b>お名前 <span class="red">必須</span></b></label> <input type="text" id="name" name="name" class="form-control" placeholder="例)山田 太郎"> </div> <div class="form-group"> <label for="job"><b>ご職業<span class="red">必須</span></b></label> <select id="job" name="job" class="form-control"> <option value="">選択してください</option> <option value="会社員">会社員</option> <option value="フリーター">フリーター</option> <option value="学生">学生</option> <option value="自営業">自営業</option> <option value="その他">その他</option> </select> </div> <div class="form-group"> <label><b>知りたい内容(複数回答可)<span class="green">任意</span></b></label> <div class="checkbox"> <label> <input type="checkbox" name="q1" value="html"> HTML </label> </div> <div class="checkbox"> <label> <input type="checkbox" name="q1" value="css"> CSS </label> </div> <div class="checkbox"> <label> <input type="checkbox" name="q1" value="javascript"> JavaScript </label> </div> </div> <div class="form-group"> <label><b>理解度はいかがですか?</b></label> <div> <label class="radio-inline"> <input type="radio" name="q2" value="1">理解できなかった </label> <label class="radio-inline"> <input type="radio" name="q2" value="2">大体理解できた </label> <label class="radio-inline"> <input type="radio" name="q2" value="3">理解できた </label> <label class="radio-inline"> <input type="radio" name="q2" value="4" checked>回答しない </label> </div> </div> <div class="form-group"> <label for="message"><b>ご意見</b></label> <textarea name="message" rows="10" class="form-control"></textarea> </div> <button type="submit" class="btn btn-default">送信する</button> </div> </form> </div> <hr> <div class="container"> <footer> <p>&copy;matsumori</p> </footer> </div> </body> </html>

css

header{ margin-top: 30px; color: #2e99a9; } body{ font-size: 14px; line-height: 1.42857143; color: #333; background-color: #fff; } hr{ border-width: 3px; border-color: #2e99a9; border-top: 1px solid #eee; margin-top: 20px; margin-bottom: 20px; } h1{ font-size: 18px; font-weight: bold; margin: 0; font-family: inherit; line-height: 1.1; color: inherit; } a{ color: #337ab7; text-decoration: none; background-color: transparent; } p{ margin: 0 0 10px; } label{ display: inline-block; max-width: 100%; margin-bottom: 5px; padding: .2em .6em .3em; font-size: 100%; line-height: 1; text-align: center; white-space: nowrap; vertical-align: baseline; border-radius: .25em; } .col-sm-offset-2{ margin-left: 16.67% } .col-sm-8{ position: relative; min-height: 1px; padding-right: 15px; padding-left: 15px; width: 66.67%; } .align-right{ text-align: right; } .container{ padding-right: 80px; padding-left: 80px; margin-right: auto; margin-left: auto; } .form-control{ display: block; width: 100%; height: 34px; padding: 6px 12px; font-size: 14px; line-height: 1.42857143; color: #555; background-color: #fff; background-image: noe; border: 1px solid #ccc; border-radius: 4px; } .form-group{ margin-bottom: 15px; } textarea{ font-family: inherit; overflow: auto; margin: 0; font: inherit; } .red{ box-sizing: border-box; margin-bottom: 15px; color: rgb(51, 51, 51); font-size: 14px; display: inline-block; max-width: 100%; margin-bottom: 5px; font-weight: 700; display: inline; padding: 0.2em 0.6em 0.3em; font-size: 10.5px; line-height: 1; color: rgb(255, 255, 255); text-align: center; white-space: nowrap; vertical-align: baseline; border-radius: 0.25em; background-color: rgb(217, 83, 79); } .green{ box-sizing: border-box; margin-bottom: 15px; color: rgb(51, 51, 51); font-size: 14px; display: inline-block; max-width: 100%; margin-bottom: 5px; font-weight: 700; display: inline; padding: 0.2em 0.6em 0.3em; font-size: 10.5px; line-height: 1; color: rgb(255, 255, 255); text-align: center; white-space: nowrap; vertical-align: baseline; border-radius: 0.25em; background-color:#5cb85c; } button{ border-radius: 4px; font-size: 14px; background-image: linear-gradient(to bottom,#fff 0,#e0e0e0 100%); box-sizing: border-box; } } @media screen and (max-width:770px) { .container{ text-align: left; } }

良い質問の評価を上げる

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

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

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

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

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

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

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

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

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

m.ts10806
m.ts10806

2019/07/29 02:25

text-alignだと変化が分かりづらいと思います。 背景色とか文字サイズを指定して確認してみてください。
dit.
dit.

2019/07/29 07:33

他の所はちゃんと見てないですけどとりあえず<div class="container"の>がありません
nyaaa6
nyaaa6

2019/07/31 05:57

<div class="container"の>が抜けていました。ご指摘ありがとうございます。一通り確認し、開発者ツールでエラーが表示されないですが、メディアクエリが機能していないようです。

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

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

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

ただいまの回答率
87.20%

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

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

質問する

関連した質問

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

レスポンシブWebデザイン

レスポンシブWebデザイン(RWD)は、スクリーンのサイズ、プラットフォーム、オリエンテーションに基づいて様々なデバイスで最適のサイトを生成するのウェブデザインとその開発のアプローチ方法を呼びます。

HTML

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

CSS

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