Q&A
ホームページで、JavaScriptを用いてナビゲーションメニューを伴うヘッダーを作っていたのですが、ヘッダー画像がうまく縮小できません。
指定先を書き換えてみても全く変化がなく困っています。ご教授いただけますと幸いです。
以下のHTMLのclass="header-logo"のsample.pngという画像です。
該当箇所には<!!問題箇所ここから!!><!!問題箇所ここまで!!>というように目印を打っています。
HTML5
1<!DOCTYPE html> 2<html> 3<head> 4 <title>タイトル</title> 5 <meta charset="utf-8"> 6 <meta name="description" content="概要入力欄。"> 7 <meta name="viewport" content="width=device-width, initial-scale=1"> 8 <link rel="stylesheet" type="text/css" href="css/style.css"> 9 <script> 10 (function(d) { 11 var config = { 12 kitId: 'grk5msi', 13 scriptTimeout: 3000, 14 async: true 15 }, 16 h=d.documentElement,t=setTimeout(function(){h.className=h.className.replace(/\bwf-loading\b/g,"")+" wf-inactive";},config.scriptTimeout),tk=d.createElement("script"),f=false,s=d.getElementsByTagName("script")[0],a;h.className+=" wf-loading";tk.src='https://use.typekit.net/'+config.kitId+'.js';tk.async=true;tk.onload=tk.onreadystatechange=function(){a=this.readyState;if(f||a&&a!="complete"&&a!="loaded")return;f=true;clearTimeout(t);try{Typekit.load(config)}catch(e){}};s.parentNode.insertBefore(tk,s) 17 })(document); 18 </script> 19 <link rel="preconnect" href="https://fonts.googleapis.com"> 20 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> 21 <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;300;400;500;700;900&display=swap" rel="stylesheet"> 22</head> 23<body> 24 25 <!-- header start --> 26 <header class="header"> 27 <div class="container"> 28 <div class="header-main"> 29 <!!問題箇所ここから!!> 30 <a class="header-logo" href="./index.html"> 31 <img src="./img/sample.png" alt="sample"> 32 </a> 33 <!!問題箇所ここまで!!> 34 <div class="open-nav-menu"> 35 <span></span> 36 </div> 37 <div class="menu-overlay"> 38 </div> 39 <!-- navigation menu start --> 40 <nav class="nav-menu"> 41 <div class="close-nav-menu"> 42 <img src="img/close.svg" alt="close"> 43 </div> 44 <ul class="menu"> 45 <li class="menu-item menu-item-has-children"> 46 <a href="#" data-toggle="sub-menu">menu<i class="plus"></i></a> 47 <ul class="sub-menu"> 48 <li class="menu-item"><a href="#">menu1</a></li> 49 <li class="menu-item"><a href="#">menu2</a></li> 50 <li class="menu-item"><a href="#">menu3</a></li> 51 <li class="menu-item"><a href="#">menu4</a></li> 52 </ul> 53 </li> 54 <li class="menu-item menu-item-has-children"> 55 <a href="#" data-toggle="sub-menu">event<i class="plus"></i></a> 56 <ul class="sub-menu"> 57 <li class="menu-item"><a href="#">event1</a></li> 58 <li class="menu-item"><a href="#">event2</a></li> 59 <li class="menu-item"><a href="#">event3</a></li> 60 <li class="menu-item"><a href="#">event4</a></li> 61 </ul> 62 </li> 63 <li class="menu-item"> 64 <a href="#">Services</a> 65 </li> 66 <li class="menu-item menu-item-has-children"> 67 <a href="#" data-toggle="sub-menu">Pages <i class="plus"></i></a> 68 <ul class="sub-menu"> 69 <li class="menu-item"><a href="#">page 1</a></li> 70 <li class="menu-item"><a href="#">page 2</a></li> 71 <li class="menu-item"><a href="#">page 3</a></li> 72 <li class="menu-item"><a href="#">page 4</a></li> 73 </ul> 74 </li> 75 <li class="menu-item"> 76 <a href="#">Sponsor</a> 77 </li> 78 <li class="menu-item"> 79 <a href="#">Access</a> 80 </li> 81 <li class="menu-item"> 82 <a href="#">Contact</a> 83 </li> 84 </ul> 85 </nav> 86 <!-- navigation menu end --> 87 </div> 88 </div> 89 </header> 90 <!-- header end --> 91 92 <!-- home section start --> 93 <section class="home-section"> 94 </section> 95 <!-- home section end --> 96 97<script src="js/script.js"></script> 98</body> 99</html>
CSS3
1body{ 2 line-height: 1.5; 3 font-family: 'Noto Sans JP', sans-serif; 4 font-weight: 500; 5} 6body.hidden-scrolling{ 7 overflow-y: hidden; 8} 9*{ 10 margin:0; 11 box-sizing: border-box; 12} 13.container{ 14 max-width: 1170px; 15 margin:auto; 16} 17ul{ 18 list-style: none; 19 margin:0; 20 padding:0; 21} 22a{ 23 text-decoration: none; 24} 25/*header*/ 26.header{ 27 position: absolute; 28 width: 100%; 29 left:0; 30 top:0; 31 z-index: 99; 32 padding: 15px; 33} 34.header-main{ 35 background-color: #115e32; 36 display: flex; 37 justify-content: space-between; 38 align-items: center; 39 padding: 10px 0; 40 border-radius: 4px; 41} 42<!!問題箇所ここから!!> 43.header-logo { 44 display: block; 45 width: 5px !important; 46} 47<!!問題箇所ここまで!!> 48.header .nav-menu{ 49 padding: 0 15px; 50} 51.header .menu > .menu-item{ 52 display: inline-block; 53 margin-left: 30px; 54 position: relative; 55} 56.header .menu > .menu-item > a{ 57 display: block; 58 padding: 12px 0; 59 font-size: 16px; 60 color: #ffffff; 61 text-transform: capitalize; 62 font-weight: 600; 63 transition: all 0.3s ease; 64} 65.header .menu > .menu-item > a .plus{ 66 display: inline-block; 67 height: 12px; 68 width: 12px; 69 position: relative; 70 margin-left:5px; 71 pointer-events: none; 72} 73.header .menu > .menu-item > a .plus:before, 74.header .menu > .menu-item > a .plus:after{ 75 content:''; 76 position: absolute; 77 box-sizing: border-box; 78 left: 50%; 79 top:50%; 80 background-color: #ffffff; 81 height: 2px; 82 width: 100%; 83 transform: translate(-50%,-50%); 84 transition: all 0.3s ease; 85} 86.header .menu > .menu-item:hover > a .plus:before, 87.header .menu > .menu-item:hover > a .plus:after{ 88 background-color: #ff4e20; 89} 90.header .menu > .menu-item > a .plus:after{ 91 transform: translate(-50%,-50%) rotate(-90deg); 92} 93.header .menu > .menu-item > .sub-menu > .menu-item > a:hover, 94.header .menu > .menu-item:hover > a{ 95 color: #ff4e20; 96} 97.header .menu > .menu-item > .sub-menu{ 98 box-shadow: 0 0 10px rgba(0,0,0,0.2); 99 width: 220px; 100 position: absolute; 101 left:0; 102 top:100%; 103 background-color: #ffffff; 104 padding: 10px 0; 105 border-top: 3px solid #ff4e20; 106 transform: translateY(10px); 107 transition: all 0.3s ease; 108 opacity:0; 109 visibility: hidden; 110} 111@media(min-width: 992px){ 112.header .menu > .menu-item-has-children:hover > .sub-menu{ 113 transform: translateY(0); 114 opacity: 1; 115 visibility: visible; 116 } 117 .header .menu > .menu-item-has-children:hover > a .plus:after{ 118 transform: translate(-50%,-50%) rotate(0deg); 119 } 120} 121.header .menu > .menu-item > .sub-menu > .menu-item{ 122 display: block; 123} 124.header .menu > .menu-item > .sub-menu > .menu-item > a{ 125 display: block; 126 padding: 10px 20px; 127 font-size: 16px; 128 font-weight: 600; 129 color: #000000; 130 transition: all 0.3s ease; 131 text-transform: capitalize; 132} 133.header .open-nav-menu{ 134 height: 34px; 135 width: 40px; 136 margin-right: 15px; 137 display: none; 138 align-items: center; 139 justify-content: center; 140 cursor: pointer; 141} 142.header .open-nav-menu span{ 143 display: block; 144 height: 3px; 145 width: 24px; 146 background-color: #000000; 147 position: relative; 148} 149.header .open-nav-menu span:before, 150.header .open-nav-menu span:after{ 151 content: ''; 152 position: absolute; 153 left:0; 154 width: 100%; 155 height: 100%; 156 background-color: #000000; 157 box-sizing: border-box; 158} 159.header .open-nav-menu span:before{ 160 top:-7px; 161} 162.header .open-nav-menu span:after{ 163 top:7px; 164} 165.header .close-nav-menu{ 166 height: 40px; 167 width: 40px; 168 background-color: #ffffff; 169 margin:0 0 15px 15px; 170 cursor: pointer; 171 display: none; 172 align-items: center; 173 justify-content: center; 174} 175.header .close-nav-menu img{ 176 width: 16px; 177} 178.header .menu-overlay{ 179 position: fixed; 180 z-index: 999; 181 background-color: rgba(0,0,0,0.5); 182 left:0; 183 top:0; 184 height: 100%; 185 width: 100%; 186 visibility: hidden; 187 opacity:0; 188 transition: all 0.3s ease; 189} 190 191/*home section*/ 192.home-section{ 193 width: 100%; 194 display: block; 195 min-height: 100vh; 196 background-image: url('../img/home.jpg'); 197 background-position: center top; 198 background-size: cover; 199} 200 201 202/* responsive */ 203 204@media(max-width: 991px){ 205 .header .menu-overlay.active{ 206 visibility: visible; 207 opacity: 1; 208} 209 .header .nav-menu{ 210 position: fixed; 211 right: -280px; 212 visibility: hidden; 213 width: 280px; 214 height: 100%; 215 top:0; 216 overflow-y: auto; 217 background-color: #222222; 218 z-index: 1000; 219 padding: 15px 0; 220 transition: all 0.5s ease; 221 } 222 .header .nav-menu.open{ 223 visibility: visible; 224 right: 0px; 225 } 226 .header .menu > .menu-item{ 227 display: block; 228 margin:0; 229 } 230 .header .menu > .menu-item-has-children > a{ 231 display: flex; 232 justify-content: space-between; 233 align-items: center; 234 } 235 .header .menu > .menu-item > a{ 236 color: #ffffff; 237 padding: 12px 15px; 238 border-bottom: 1px solid #333333; 239 } 240 .header .menu > .menu-item:first-child > a{ 241 border-top: 1px solid #333333; 242 } 243 .header .menu > .menu-item > a .plus:before, 244 .header .menu > .menu-item > a .plus:after{ 245 background-color: #ffffff; 246 } 247 .header .menu > .menu-item-has-children.active > a .plus:after{ 248 transform: translate(-50%,-50%) rotate(0deg); 249 } 250 .header .menu > .menu-item > .sub-menu{ 251 width: 100%; 252 position: relative; 253 opacity: 1; 254 visibility: visible; 255 border:none; 256 background-color: transparent; 257 box-shadow: none; 258 transform: translateY(0px); 259 padding: 0px; 260 left: auto; 261 top:auto; 262 max-height: 0; 263 overflow: hidden; 264 } 265 .header .menu > .menu-item > .sub-menu > .menu-item > a{ 266 padding: 12px 45px; 267 color: #ffffff; 268 border-bottom: 1px solid #333333; 269 } 270 .header .close-nav-menu, 271 .header .open-nav-menu{ 272 display: flex; 273 } 274} 275 276
JavaScriptに関しては問題ないので文字数の制限上省略します。不十分な説明で申し訳ありませんが回答いただけますと幸いです。
回答1件
0
ベストアンサー
img要素にサイズを指定していないので、画像のオリジナルサイズになります。
ご希望のサイズを指定すればいいでしょう。
css
1.header-logo img { 2 height: 30px; 3 width: 30px; 4}
投稿2022/06/04 22:30
総合スコア33715
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。