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

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

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

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

HTML

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

CSS

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

Q&A

解決済

1回答

1518閲覧

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

nyaaa6

総合スコア21

レスポンシブWebデザイン

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

HTML

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

CSS

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

0グッド

0クリップ

投稿2019/07/29 02:22

編集2019/07/31 06:00

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

<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

1 2header{ 3 margin-top: 30px; 4 color: #2e99a9; 5} 6 7body{ 8 font-size: 14px; 9 line-height: 1.42857143; 10 color: #333; 11 background-color: #fff; 12} 13 14hr{ 15 border-width: 3px; 16 border-color: #2e99a9; 17 border-top: 1px solid #eee; 18 margin-top: 20px; 19 margin-bottom: 20px; 20} 21 22h1{ 23 font-size: 18px; 24 font-weight: bold; 25 margin: 0; 26 font-family: inherit; 27 line-height: 1.1; 28 color: inherit; 29} 30 31a{ 32 color: #337ab7; 33 text-decoration: none; 34 background-color: transparent; 35} 36 37p{ 38 margin: 0 0 10px; 39} 40 41label{ 42 display: inline-block; 43 max-width: 100%; 44 margin-bottom: 5px; 45 padding: .2em .6em .3em; 46 font-size: 100%; 47 line-height: 1; 48 text-align: center; 49 white-space: nowrap; 50 vertical-align: baseline; 51 border-radius: .25em; 52} 53 54.col-sm-offset-2{ 55 margin-left: 16.67% 56} 57 58.col-sm-8{ 59 position: relative; 60 min-height: 1px; 61 padding-right: 15px; 62 padding-left: 15px; 63 width: 66.67%; 64} 65 66.align-right{ 67 text-align: right; 68} 69 70.container{ 71 padding-right: 80px; 72 padding-left: 80px; 73 margin-right: auto; 74 margin-left: auto; 75} 76 77.form-control{ 78 display: block; 79 width: 100%; 80 height: 34px; 81 padding: 6px 12px; 82 font-size: 14px; 83 line-height: 1.42857143; 84 color: #555; 85 background-color: #fff; 86 background-image: noe; 87 border: 1px solid #ccc; 88 border-radius: 4px; 89} 90 91.form-group{ 92 margin-bottom: 15px; 93} 94 95textarea{ 96 font-family: inherit; 97 overflow: auto; 98 margin: 0; 99 font: inherit; 100} 101 102.red{ 103 box-sizing: border-box; 104 margin-bottom: 15px; 105 color: rgb(51, 51, 51); 106 font-size: 14px; 107 display: inline-block; 108 max-width: 100%; 109 margin-bottom: 5px; 110 font-weight: 700; 111 display: inline; 112 padding: 0.2em 0.6em 0.3em; 113 font-size: 10.5px; 114 line-height: 1; 115 color: rgb(255, 255, 255); 116 text-align: center; 117 white-space: nowrap; 118 vertical-align: baseline; 119 border-radius: 0.25em; 120 background-color: rgb(217, 83, 79); 121} 122 123.green{ 124 box-sizing: border-box; 125 margin-bottom: 15px; 126 color: rgb(51, 51, 51); 127 font-size: 14px; 128 display: inline-block; 129 max-width: 100%; 130 margin-bottom: 5px; 131 font-weight: 700; 132 display: inline; 133 padding: 0.2em 0.6em 0.3em; 134 font-size: 10.5px; 135 line-height: 1; 136 color: rgb(255, 255, 255); 137 text-align: center; 138 white-space: nowrap; 139 vertical-align: baseline; 140 border-radius: 0.25em; 141 background-color:#5cb85c; 142} 143 144button{ 145 border-radius: 4px; 146 font-size: 14px; 147 background-image: linear-gradient(to bottom,#fff 0,#e0e0e0 100%); 148 box-sizing: border-box; 149 } 150 151} 152 153 154@media all and (min-width:770px) { 155 header{ 156 margin-top: 1000px; 157 color: #2e99a9; 158 } 159} 160

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

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

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

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

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

m.ts10806

2019/07/29 02:25

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

2019/07/29 07:33

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

2019/07/31 05:57

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

回答1

0

ベストアンサー

不要なブレースが入ってるからですよ。

button{ border-radius: 4px; font-size: 14px; background-image: linear-gradient(to bottom,#fff 0,#e0e0e0 100%); box-sizing: border-box; } }

これの最後の"}"はいらないはずです。

投稿2019/07/29 03:57

Ashi

総合スコア139

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

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

nyaaa6

2019/07/31 06:11

解決しました!ありがとうございます
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問