Q&A
前提・実現したいこと
スマホ上でサイドメニューを消して記事を大きく表示したい
発生している問題・エラーメッセージ
htmlファイルとcssファイルを分けて書いているのですが、viewportもcssも反映されているのにメディアクエリだけが反映されません。
該当のソースコード
一部抜粋します
test.html
1 2<!DOCTYPE HTML> 3<html> 4<head> 5<meta charset="utf-8" /> 6<title>test</title> 7<meta name="viewport" content="width=device-width,initial-scale=1" /> 8<link rel="stylesheet" href="test.css" type="text/css" /> 9</head> 10<body> 11 <nav id="leftmenu"> 12 <table><th>menu</th></tr> 13 <tr><td>sample</td></tr></table> 14 <nav id="rightmenu"> 15 <table><th>menu</th></tr> 16 <tr><td>sample</td></tr></table> 17</nav> 18 <div id="article"> 19 <h1>test</h1> 20 <p>テストです</p> 21 </div> 22</body> 23</html> 24
test.css
1body{ text-align: center; width: auto; margin: 0;} 2 3nav#leftmenu { float: left; position: sticky; top: 0; } 4 5nav#rightmenu { float: right; position: sticky; top: 0; } 6 7@media screen and (max-width: 767px;){ nav#leftmenu,nav#rightmenu { display: none;} } 8 9#article {width: 50%; margin: 0 auto; } 10 11@media screen and (max-width: 767px;){ #article { width: 100%; margin: 0 auto; }}
試したこと
andと()の間のスペースや記述を統合したり、共通部分も含めてpc用とスマホ用の@media screenをそれぞれ別に用意してもダメでした…
回答1件
0
ベストアンサー
(max-width: 767px;)の部分の;は不要です。
参考：https://developer.mozilla.org/ja/docs/Web/CSS/Media_Queries/Using_media_queries
あと、ところどころHTMLも間違っているので確認してみてください。（tr開始タグやnav終了タグが足りてないです）
間違っている箇所を直したものも載せておきます
https://jsfiddle.net/5fa639gp/
投稿2019/10/29 09:18
総合スコア1679
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/10/29 09:22