Q&A
具体的にHTMLおよびCSSを質問文にコードブロックで追記されたほうが回答を得られやすいと思います。コードブロックは ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。
お世話になります。
レスポンシブwebデザインやメディアクエリの使い方をドットインストール他で
勉強しましたが、いざ書いてみると、レスポンシブになりません。
ブログなどの記事を読んでやってみるのですが、合っているのかわからず、
なにが間違っているのかも分かりません。
@media screen and (min-width: 769px) {
セレクタ { プロパティ:値; プロパティ:値 }
}
cssの内容をそのままサイズに適用する様に記述するのではいけないのでしょうか？
ちなみに作っているページは以下です。
http://yukycohamabe.ciao.jp/happyholiday/index.html
かれこれ１ヶ月近く作っていて頭が混乱しています。
達人の方ご教示頂けませんでしょうか？
よろしくお願いします。
回答2件
0
ベストアンサー
ともかく実験できる（合っているかどうかがわかる）環境が必須です。
なるべく小さく書いてみて効果が発揮されるのを確認していくのが
勉強するにあたっても効率が良いかと思います。
HTML
1<!doctype html> 2<html lang="jp"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1"> 6 <title>Document</title> 7 <style type="text/css"> 8 html { 9 background: #f77; 10 } 11 12 @media screen and (min-width: 769px) { 13 html { 14 background: #77f; 15 } 16 } 17 </style> 18</head> 19<body> 20 <div>メディアクエリテスト</div> 21</body> 22</html>
それとCSSには適用に優先ルールがあるのでそれを理解しないと
メディアクエリ内のCSSが打ち消される可能性があります。
私は音楽を少しやっているので「新増沢方式」というイメージで理解しています。
ざっくりいうとこんな感じです。
１．IDセレクタが多い方が優先
２．（IDセレクタの数が同じなら）クラスセレクタが多い方が優先
３．（IDセレクタ、クラスセレクタの数が同じなら）タイプセレクタが多い方が優先
４．（上記３つの数が同じなら）下（後）に書いてある方が優先
基本メディアクエリ外と内では同じセレクタの書き方をしたほうがいいです。
投稿2017/12/27 00:35
総合スコア3828
0
@media screen and (min-width: 769px) {
クラス名：プロパティ;
}
@mediaの中に書くのは、「普通のCSSとして書けるもの」、すなわち「セレクタとルールの組」です。セレクタ無しでプロパティだけ書くことはできません（MDN）。@mediaの外側と同様、セレクタ { プロパティ:値; プロパティ:値 }というように書いていきます。
メディアクエリの条件しだいで全体にかけたいのであれば、htmlや*など適切なセレクタに適用しましょう。
投稿2017/12/26 15:15
編集2017/12/26 15:17
総合スコア145183
あなたの回答
tips
プレビュー
