Q&A
やりたいこと
.p-footer__logoのマークがブラウザを縮小したり、拡大しても一緒に動かないように固定にしたい。
下記のようにロゴマークをずっと下記の位置に固定しておきたい。 ご教授いただけないでしょうか。
現状
下記のようにブラウザのサイズを変えると、ロゴマークが動いてしまう。
試したこと
・position fixed→画像が消えてしまう
・親要素をつけて親要素をwidth100％にして.p-footer__logoにmarginで位置を指定。
html
1 <div class="p-footer"> 2 <div class="p-footer__left"> 3 <div class="p-footer__txtcontainer"> 4 <img class="p-footer__logo" src="./assets/images/footer_logo.png" alt="フッターロゴ"> 5 </div> 6 <ul id="pcmap" class="p-footer__menu"> 7 <li class="p-footer__list"><a href="">REO STORE</a></li> 8 <li class="p-footer__list"><a href="">CONTACT US</a></li> 9 <li class="p-footer__list"><a href="">プライバシーポリシー</a></li> 10 <li class="p-footer__list"><a href="">ABOUT</a></li> 11 <li class="p-footer__list"><a href="">DIGITAL ASSET</a></li> 12 <li class="p-footer__list"><a href="">ロゴや選手画像の使用について</a></li> 13 <li class="p-footer__list"><a href="">NEWS</a></li> 14 <li class="p-footer__list"><a href="">CAREERS</a></li> 15 <li class="p-footer__list"><a href="">ファンレター・プレゼントについて</a></li> 16 <li class="p-footer__list"><a href="">MEMBERS</a></li> 17 <li class="p-footer__list"><a href=""></a></li> 18 <li class="p-footer__list"><a href="">配信動画等の切り抜きガイドライン</a></li> 19 <li class="p-footer__list"><a href="">PARTNERS</a></li> 20 </ul> 21 <div class="p-footer__container"> 22 <ul id="spmap1" class="p-footer__menu"> 23 <li class="p-footer__list"><a href="">REO STORE</a></li> 24 <li class="p-footer__list"><a href="">CONTACT US</a></li> 25 <li class="p-footer__list"><a href="">ABOUT</a></li> 26 <li class="p-footer__list"><a href="">DIGITAL ASSET</a></li> 27 <li class="p-footer__list"><a href="">NEWS</a></li> 28 <li class="p-footer__list"><a href="">CAREERS</a></li> 29 <li class="p-footer__list"><a href="">MEMBERS</a></li> 30 <li class="p-footer__list"><a href="">PARTNERS</a></li> 31 </ul> 32 <ul id="spmap2" class="p-footer__menu"> 33 <li class="p-footer__list"><a href="">プライバシーポリシー</a></li> 34 <li class="p-footer__list"><a href="">ロゴや選手画像の使用について</a></li> 35 <li class="p-footer__list"><a href="">ファンレター・プレゼントについて</a></li> 36 <li class="p-footer__list"><a href="">配信動画等の切り抜きガイドライン</a></li> 37 </ul> 38 </div> 39 </div> 40 <div class="p-footer__right"> 41 <p>OFFICIAL SNS ACCOUNT // @reogaming</p> 42 <ul class="p-footer__sns"> 43 <li class="p-footer__snsList"> 44 <a href=""><img class="p-footer__snsImg" src="./assets/images/twitter.png" alt=""></a> 45 </li> 46 <li class="p-footer__snsList"> 47 <a href=""><img class="p-footer__snsImg" src="./assets/images/line.png" alt=""></a> 48 </li> 49 <li class="p-footer__snsList"> 50 <a href=""><img class="p-footer__snsImg" src="./assets/images/twitch.png" alt=""></a> 51 </li> 52 <li class="p-footer__snsList"> 53 <a href=""><img class="p-footer__snsImg" src="./assets/images/instagram.png" alt=""></a> 54 </li> 55 <li class="p-footer__snsList"> 56 <a href=""><img class="p-footer__snsImg" src="./assets/images/facebook.png" alt=""></a> 57 </li> 58 </ul> 59 <p class="p-footer__txt1">4F Xxx20, 1-11-2 Xxxxx Xxxxx-x Tokyo, JAPAN</p> 60 <p class="p-footer__txt2">© 2018 - 2022,<a href="">XXXX Inc.</a>All rights reserved.</p> 61 </div> 62 </div>
css
1.p-footer__txtcontainer { 2 width: 100%; 3 margin-bottom: 24px; 4} 5 6.p-footer__logo { 7 width: 30px; 8 height: 30px; 9 object-fit: cover; 10}
回答1件
0
ベストアンサー
これでずれずれしないかもと思います。お試しください。
css
1.p-footer__txtcontainer { 2 width: 100%; 3 height: 30px;/*ロゴの高さをここで確保*/ 4 margin-bottom: 24px; 5 position: relative;/*これでコンテナがロゴ位置の基準となる*/ 6} 7 8.p-footer__logo { 9 width: 30px; 10 height: 30px; 11 object-fit: cover; 12 position: absolute; /*親コンテナに対して絶対指定*/ 13 top: 0px;/*好きな値、単位はvwでも何でも*/ 14 left: 0px;/*好きな値、〃 */ 15}
投稿2022/05/25 20:55
総合スコア38
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。