Q&A
CSSにメディアクエリに関する指定が無いようです
前提・実現したいこと
例えばheader-wrapper＞header-navをdisplay:blockにしたりといった指示をしたいのですが、メディアクエリのcssがききません。
検証ツールでも見たところ、エラーが発生しているわけでもなくて、ただそもそもそこにレスポンシブの指示が上がってきていません。
【目標】headerのレスポンシブ指示を聞かせたい
【現状】メディアクエリ内のheaderの指示がきかない
該当のソースコード
HTML
1<header> 2 3 <div class="header-wrapper"> 4 <h1 class="header-left"><a href="#">Cresta Design</a></h1> 5 <ul class="header-nav"> 6 <li class="header-item"><a href="#">Concept</a></li> 7 <li class="header-item"><a href="#">Service</a></li> 8 <li class="header-item"><a href="#">Works</a></li> 9 <li class="header-item"><a href="#">Contact</a></li> 10 </ul> 11 12 <button class="buger-btn"> 13 <span class="bar bar_top"></span> 14 <span class="bar bar_mid"></span> 15 <span class="bar bar_bottom"></span> 16 </button> 17 18 </div> 19 20 21 22 23 </header>
該当のソースコード
CSS
1 2 3@media screen and (max-width:767px) { 4 html { 5 body { 6 html body header .fv .header-wrapper, 7html body header .fv .main-copy-wrapper { 8 padding: 0; 9 } 10 html body header .fv .header-wrapper { 11 line-height: 35px; 12 align-items: center; 13 justify-content: space-between; 14 padding: 30px 15px 0; 15 } 16 html body header .fv .header-wrapper .header-nav { 17 display: none; 18 } 19 html body header .fv .header-wrapper .fa-bars { 20 display: block; 21 font-size: 3rem; 22 color: #FFFFFF; 23 -webkit-text-stroke-width: 0.5px; 24 } 25 html body header .fv .main-copy-wrapper { 26 color: #FFFFFF; 27 position: absolute; 28 top: 40%; 29 left: 7%; 30 text-align: center; 31 margin: 0 auto; 32 } 33 html body header .fv .main-copy-wrapper .main-title, 34html body header .fv .main-copy-wrapper .main-text { 35 font-weight: bold; 36 } 37 html body header .fv .main-copy-wrapper .main-title { 38 font-size: 3.7rem; 39 padding-bottom: 55px; 40 max-width: 327px; 41 } 42 html body header .fv .main-copy-wrapper .main-text { 43 font-size: 2.5rem; 44 height: 90px; 45 width: 206px; 46 font-weight: bold; 47 display: inline-block; 48 /*インラインブロックにすると中央に寄せることができる*/ 49 } 50}} 51}
試したこと
①メディアクエリそのものが効いていない疑惑
→レスポンシブのh3タグなどのcolor変更をしたところ動作確認ができたのでメディアクエリは効いていると思われます
②キャッシュの削除
→変化なし
③クラス名や詳細度が間違っている
→一応書き直したりもしましたが、そもそもpc版のcssからそのままコピペして必要な個所を書き換えて、不要な個所を消すといった手順でやっているため記載ミスは考えにくいと思われます
補足情報（FW/ツールのバージョンなど）
OS:Windows
エディタ:Brackets
ブラウザ:クローム
回答1件
0
自己解決
こんにちは。
表題の件に関しまして、解決いたしましたのでご報告致します。
結論として原因は不明ですが、以下の方法で解決できました。
【改善前】
CSS
1@media screen and (max-width:767px) { 2 html { 3 body {（中は省略） 4header{（中は省略）} 5}} 6}
【改善後】
CSS
1@media screen and (max-width:767px) { 2 html { 3 body {（中は省略）}} 4header{（中は省略）}/*共通レイアウトのみhtml bodyタグでくくり、headerは外に出した(PC版のCSSも同様にする)*/ 5}
なんとなくの直感でやったらできただけで、なぜ<html><body>内にくくるとできなかったのかの理由はまだわかっていないので、詳細な理由または別の解決法をご存じの方がいらっしゃればまたご教授頂ければと思います。
ご閲覧、ご教授頂きました皆様誠にありがとうございました。
投稿2021/02/21 23:53
総合スコア49
あなたの回答
tips
プレビュー
