h1タグで付けた表示が、パソコン、タブレットでは正常に表示されるのですが、スマホ用画面でロゴと揃いません。
タブレット、PC時の表示
@media (min-width:668px) and (max-width:1024px)と
@media (min-width:1025px)
スマホ時の表示
このように、不自然にページタイトルの文字の上が開いてしまいます。
上下中央に揃えたいです。
サイトロゴの画像は45px*45pxです。
HTML
1 <header> 2 <div class="headerBar"> 3 <div class="sitelogo"> 4 <h1><img src="logo.png" alt="サイトロゴ"><a href="index.html">ページタイトル</a></h1> 5 </div> 6 <div class="menu"> 7 <span class="fas fa-bars" id="menubar"></span> 8 </div> 9 </div> 10 </header>
css
1//共通のcss 2.sitelogo{ 3float:left; 4width:90%; 5} 6.menu{ 7width:10%; 8float:right; 9font-size:34px; 10line-height:45px; 11} 12 13h1 a{ 14 text-decoration: none; 15 16} 17 18.headerBar:after{ 19 content:""; 20 display:block; 21 clear:both; 22} 23.sitelogo{ 24float:left; 25width:90%; 26} 27.menu{ 28width:10%; 29float:right; 30font-size:34px; 31line-height:45px; 32} 33 34h1 a{ 35 text-decoration: none; 36 37} 38h1:hover{ 39opacity:0.8; 40} 41h1 a:visited{ 42color:#fff; 43} 44//スマホ用 45@media (min-width:375px) and (max-width:667px){ 46body{ 47width:100%; 48} 49 50h1 a{ 51 font-size: 15px; 52} 53.sitelogo{ 54 height:45px; 55}
どうすればいいかご教授お願いします。
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/06/20 06:12