webサイトのヘッダーを作成してます
ページ幅が広い時はヘッダーの右端にリンクを表示して
幅が狭い時はハンバーガーメニューのようなボタンを表示させました
(仮のコードなので最小限のものしか書いていません)
html
1<header> 2 <nav> 3 <div> 4 <a href='#'>Top</a> 5 </div> 6 <ul class="pc-menu"> 7 <li><a href='#'>Link1</a></li> 8 <li><a href='#'>Link2</a></li> 9 <li><a href='#'>Link3</a></li> 10 </ul> 11 <button class="mobile-menu">MENU</button> 12 </nav> 13</header>
scss
1/* global */ 2body { 3 margin: 0; 4 padding: 0; 5} 6 7/* header */ 8header { 9 background: gray; 10 nav { 11 display: flex; 12 justify-content: space-between; 13 align-items: center; 14 } 15} 16 17.pc-menu { 18 display: none; 19} 20 21@media (min-width: 768px) { 22 .mobile-menu { 23 display: none; 24 } 25 .pc-memu { 26 display: block; 27 } 28}
画面幅が狭いときのメニューのボタン(.mobile-menu)は画面幅が広くなると消せましたが
画面幅が広い時のメニューのリンク(.pc-menu)は表示されませんでした
そこで!importantを追加するとうまく表示されました
scss
1@media (min-width: 768px) { 2 .mobile-menu { 3 display: none; 4 } 5 .pc-memu { 6 display: block !important; <--変更 7 } 8}
しかしこのように多くのスタイルに!importantを付けていくのは好ましくないと思います
なるべく!importantを使わずにレスポンシブデザインを実現するにはどうすればいいのでしょうか
回答4件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。