Q&A
コードはマークダウンのcode機能を利用してご提示ください。
また、各cssファイルの中身がわからないと再現確認できませんのであわせてご提示ください。
読み込みは成功してますよね？
>crome
誤字です。
メディアクエリが反映されません。
レスポンシブデザインの練習として以下のようなコードを書いたのですが一向にchromeに反映されません。
原因を教えていただけると幸いです。
エラーメッセージ
該当のソースコード
html
1<!DOCTYPE html> 2<html lang="en" dir="ltr"> 3 <head> 4 <meta charset="utf-8"> 5 <title>practice</title> 6 <meta name="viewport" content="width=device-width,initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0"> 7 <link rel="stylesheet" type="text/css" href="main.css"> 8 <link rel="stylesheet" type="text/css" href="responsive.css" media="screen and(max-width:900px)"> 9 10 11 </head> 12 <body> 13 <div class="header"> 14 <div class="inner"> 15 <h1>Example Header</h1> 16 </div> 17 </div> 18 <div class="nav"> 19 <div class="graph"> 20 <ul> 21 <li>home</li> 22 <li>about</li> 23 <li>SampleLink1</li> 24 <li>SampleLink2</li> 25 <li>SampleLink3</li> 26 <li>SampleLink4</li> 27 <li>portlate</li> 28 <li>content</li> 29 </ul> 30 </div> 31 </div> 32 <div class="body-content"> 33 <div class=main> 34 <div class="sections"> 35 <div class="section neko1"> 36 <img src="https://i.ytimg.com/vi/W0rlEVh1Z9w/maxresdefault.jpg" alt="neko1" height="200px" width="100%"> 37 <h2>Section1</h2> 38 <p>kjdfkjdfkjddkjdfkjdfkjdkjjdffkjdf</p> 39 </div> 40 <div class="section neko2"> 41 <img src="https://i.ytimg.com/vi/W0rlEVh1Z9w/maxresdefault.jpg" alt="neko2" height="200px" width="100%"> 42 <h2>Section2</h2> 43 <p>jdkjdfkjdfkjdfkjdfkjdfkjdkjdfkjdfkjdkjdffkjdf</p> 44 </div> 45 <div class="section neko3"> 46 <img src="https://i.ytimg.com/vi/W0rlEVh1Z9w/maxresdefault.jpg" alt="neko3" height="200px" width="100%" > 47 <h2>Section3</h2> 48 <p>kjdfkjjdfkjdkjdfkjdfkjdkjdffkjjdkjdfkfkjdf</p> 49 </div> 50 </div> 51 </div> 52 </div > 53 54 55 </body> 56</html> 57
css
1responsive.css 2.section{ 3 width:47.5%; 4 }
試したこと
responsive.cssに書いても反映されなかったので、main.cssに
@media screen and(max-width:900px){
.section{
width:47.5%;
}
}
と書いたりしたのですが出力先に変化はありませんでした。
補足情報（FW/ツールのバージョンなど）
ここにより詳細な情報を記載してください。
キャッシュクリアはしてますよね？
F12→更新ボタン右クリック→キャッシュのクリアとハードの再読み込み
回答2件
0
ベストアンサー
CSS
1@media screen and(max-width:900px) { 2↓ 3@media screen and (max-width:900px) {
and の後ろには半角スペースが必須です。
私も勉強中の頃に同じミスでハマったのを覚えています。
投稿2019/11/22 04:58
編集2019/11/22 04:59
総合スコア506
あなたの回答
tips
プレビュー
