前提・実現したいこと
HTML5,CSS3を使用しています。
PCでは画像Aと画像Bを表示させ、それらを横並びにしたい
スマホでは画像Aのみを表示させ、画像Bは表示させない
…ようにしたいと思っています。
発生している問題
htmlにおいて画像Bのimgタグの中にclass="none"をつけ、以下のコーディングをしています。
html
1<header> 2 <div class="header-container"> 3 <h1 class="header-logo"> 4 <div class="header-inner"> 5 <a href="index.html"><img src="img-a.jpg" height="100" srcset="img-a-small 1x, img-a-big.jpg 2x" alt="画像A"></a><img class="none" src="img-b.JPG" height="70" alt="画像B"> 6 <button class="hamburger" id="mobile-menu"></button> 7 </div> 8 </h1> 9 </div> 10</header>
css
1.header-logo { 2 padding: 0; 3 width: auto; 4 height: 100px; 5} 6.header-inner { 7 justify-content: space-around; 8 align-items: center; 9} 10.none { 11 width: 250px !important; 12 display: none !important; 13 margin-right: 0 !important; 14} 15.hamburger { 16 border: 1px solid #999; 17 border-radius: 4px; 18 width: 50px; 19 height: 50px; 20 background: url(hamburger.png) no-repeat center center; 21 background-size: contain; 22 opacity: 0.7; 23} 24 25@media screen and (min-width: 768px) { 26 .header-logo { 27 padding: 0; 28 height: auto; 29 } 30 .none { 31 display: block !important; 32 } 33 .hamburger { 34 display: none; 35 } 36} 37 38.header-container { 39 margin: 0 auto; 40 padding-left: 10px; 41 padding-right: 10px; 42 max-width: 1000px; 43} 44@media screen and (min-width: 768px) { 45 .container{ 46 padding-left: 20px; 47 padding-right: 20px; 48 } 49}
この状態では、PCで見た時に画像AとBが縦並び・左寄せ(max-width:1000pxの範囲内で)の状態で表示されており、横並びになりません…。
試したこと
displayが画像サイズによって表示・非表示が切り替えられることは確認できました。
また、class="none"をなくせば横並びになることも確認できました。
インスペクターで画像Bについて見ると、marginを設定していないにも関わらず、画像Bの横にmarginがあることを表すオレンジ色の網掛けが表示されます。
お尋ねしたい事
classを指定していては必ず横並びにできないのでしょうか?スマホでは画像Bを非表示にする状態を保ったまま、PCで画像AとBを横並びにする方法があればお教え下さい。よろしくお願いします。
回答1件
あなたの回答
tips
プレビュー