Q&A
タグを追加してください。
https://teratail.com/tags/%E3%83%AC%E3%82%B9%E3%83%9D%E3%83%B3%E3%82%B7%E3%83%96Web%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3
https://teratail.com/tags/CSS
あとflexのようなものではなく、色など明らかに変化が分かる指定で検証したほうが良いかと。
前提・実現したいこと
ドットインストールのレスポンシブウエブデザイン編の、「＃7要素を横並びにしよう」を学んでいます。
メディアクエリが反応しないです。
どなたか教えてください。
発生している問題・エラーメッセージ
@mediaで指定したCSSが反映されない
→画面幅を600px以上でdisplayをflexにしましたが、横並びになりません。
該当のソースコード
HTML
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>My Site</title> 7 <link rel="stylesheet" href="style.css"> 8</head> 9<body> 10 <section> 11 <div class="image"></div> 12 <div class="text"></div> 13 </section> 14</body> 15</html>
CSS
1/* common */ 2/* small screen */ 3body { 4 margin: 0; 5} 6 7.image { 8 background: pink; 9 height: 100px; 10} 11 12.text { 13 background: silver; 14 height: 100px; 15} 16 17 18/* medium screen */ 19@media (min-width: 600px) { 20 section { 21 display: flex; 22 } 23}
試したこと
viewportの記載
PCウインドーの幅を変えてみて確認
補足情報（FW/ツールのバージョンなど）
エディタはSublime Text です。
回答1件
ベストアンサー
あなたの回答
tips
プレビュー
