Q&A
imgタグのCSS「height」が「hight」となってますが、これは写し間違いですか？正しい綴りにしたらどうなりますか？
position:absoluteで指定した画像を
chromeのデベロッパーツールで確認すると
spのサイズiphonの5～8に変更する度に位置がずれてしまいます。
自分の理解のなさと初歩的なミスをしているのだと思うのですが、
分かりませんお願いします。
html
1コード<!doctype html> 2<html> 3<head> 4<meta charset="utf-8"> 5<meta name="viewport" content="width=device-width,initial-scale=1"> 6<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script> 7<title></title> 8<link href="css/reset.css" rel="stylesheet" type="text/css"> 9<link href="css/style.css" rel="stylesheet" type="text/css"> 10<script> 11$(function(){ 12 $('.menu-trigger').on('click',function(){ 13 $(this).toggleClass('active'); 14 $('.g-nav').slideToggle(); 15 }); 16}); 17</script> 18</head> 19<body> 20 <header> 21 <a class="menu-trigger"> 22 <span></span> 23 <span></span> 24 <span></span> 25</a> 26<nav class="g-nav"> 27 <ul class="list"> 28 <li class="item"><a href="">ホーム</a></li> 29 <li class="item"><a href="">お知らせ</a></li> 30 <li class="item"><a href="">キャリスターについて</a></li> 31 <li class="item"><a href="">取扱い車種</a></li> 32 <li class="item"><a href="">会社概要</a></li> 33 <li class="item"><a href="">よくあるご質問</a></li> 34 <li class="item"><a href="">採用情報</a></li> 35 <li class="item"><a href="">お問い合わせ</a></li> 36 <li class="item"><a href="">プライバシーポリシー</a></li> 37 </ul> 38</nav> 39 <p><img src="img/main_top.jpg" alt="背景"></p> 40 <div class="nav_box"> 41 <h1 class="logo_img"><img src="img/logo.png" alt="キャリスター"></h1> 42 </div> 43 </header> 44</body> 45</html>
css
1コード@charset "utf-8"; 2/* CSS Document */ 3 4html{ 5 font-size:62.5%;} 6html,p,ul,ol,li,a{ 7 text-decoration:none; 8 list-style:none; 9} 10 11@media screen and (-webkit-min-device-pixel-ratio:0) { 12 ::i-block-chrome, body { 13 font-feature-settings: "pkna"; 14 } 15} 16body{ 17 text-align:center; 18 font-size:1.6rem;/* 16px */ 19 line-height:1.5; 20 -webkit-text-size-adjust: 100%; 21 font-feature-settings: "palt"; 22} 23 24img{ 25 width:100%; 26 hight:auto; 27 vertical-align: bottom; 28} 29/*ヘッダーメニュー開始*/ 30.menu-trigger, 31.menu-trigger span{ 32 display: inline-block; 33 transition: all .4s; 34 box-sizing: border-box; 35 cursor :pointer; 36} 37.menu-trigger{ 38 position:fixed; 39 width: 50px; 40 height: 50px; 41 z-index: 2; 42 left:0; 43} 44.menu-trigger span{ 45 position: absolute; 46 background: #fff; 47 width: 30px; 48 height: 3px; 49 left: 0; 50 right: 0; 51 margin: auto; 52} 53.menu-trigger span:nth-of-type(1){ 54 top: 14px; 55} 56.menu-trigger span:nth-of-type(2){ 57 top: 0; 58 bottom: 0; 59} 60.menu-trigger span:nth-of-type(3){ 61 bottom: 14px; 62} 63.menu-trigger.active span:nth-of-type(1){ 64 -webkit-transform: translateY(9px) rotate(-45deg); 65 transform: translateY(9px) rotate(-45deg); 66} 67.menu-trigger.active span:nth-of-type(2){ 68 opacity: 0; 69} 70.menu-trigger.active span:nth-of-type(3){ 71 -webkit-transform: translateY(-9px) rotate(45deg); 72 transform: translateY(-9px) rotate(45deg); 73} 74.g-nav{ 75 display: none; 76 position:fixed; 77 top: 0; 78 background:#000000e8; 79 width: 100%; 80 height: 100%; 81} 82.g-nav .list{ 83 padding: 50px 10px 0; 84} 85.g-nav .list .item{ 86 line-height:1.3; 87 border-bottom: 1px solid #ffffff40; 88} 89.g-nav .list .item a{ 90 display: block; 91 text-align: center; 92 text-decoration: none; 93 color: #ffffffe8; 94 padding: 15px 0; 95} 96.nav_box{ 97 position: relative; 98 height: 100%; 99} 100.logo_img{ 101 position:absolute; 102 width:100%; 103 top:-150px; 104 left:0; 105}
修正したいimgの要素箇所はhtmlの
<p><img src="img/main_top.jpg" alt="背景"></p> <div class="nav_box"> <h1 class="logo_img"><img src="img/logo.png" alt="キャリスター"></h1> </div> の部分になります。 分かりにくい場合、修正依頼の連絡をください。修正します。 宜しくお願いします。
回答1件
0
ベストアンサー
PCでは横幅が固定なので、top: -150px;は当然位置がずれませんが、
SPでは横幅が可変するので、top: -150px;は当然位置がずれます。
ずれる原因としては、横幅のサイズが変化することで縦幅が変化します。
position位置がpx指定なので位置が次第にずれていきます。
対処方法1
pxではなくvwを使用する。
vw = viewport width => ビューポートの幅に対する割合
vw使用時のサンプル
※ロゴ画像のサイズ感が不明だったのでCSSでスタイルを付与しています
jsFiddle サンプル
対処方法2
html構造を変更する
ロゴ画像を背景画像の子要素として扱う
背景画像位置を起点とするためtop: -XX;としなくて済む
変更前の構造
lang=html
1<p><img src="img/main_top.jpg" alt="背景"></p> 2<div class="nav_box"> 3<h1 class="logo_img"><img src="img/logo.png" alt="キャリスター"></h1> 4</div>
変更後の構造
lang=html
1<div class="bg"> 2 <img src="https://dummyimage.com/400x200" alt="背景"> 3 <div class="nav_box"> 4 <h1 class="logo_img">キャリスター</h1> 5 </div> 6</div>
構造変更後のサンプル
※ロゴ画像のサイズ感が不明だったのでCSSでスタイルを付与しています
jsFiddle サンプル
投稿2018/07/28 01:23
編集2018/07/28 01:28
退会済みユーザー
総合スコア0
ご回答ありがとうございました。
対処方法2を利用して、位置が固定できました！
ありがとうございます。
質問なんですが、対処2のh1タグをdivで囲っているのは、なぜですか？
<div class="nav_box">
<h1 class="logo_img">キャリスター</h1>
</div>
もう一つ、ロゴの画像のサイズを変更したい場合
.nav_boxのwidthの100%を90%に変更したいと思うのですが、正しいでしょうか？
何度もすいません。ご確認お願いします。
うん？？
> 対処2のh1タグをdivで囲っているのは、なぜですか？
質問者様が掲載したコードをコピペしてネストさせただけですが。。。何故と申されても。。。(~_~;)
> .nav_boxのwidthの100%を90%に変更したいと思うのですが、正しいでしょうか？
widthを100%から90%にするのが正しいかどうかは私の方では判断できません。
質問者様が実現したいデザイン通りになっていれば問題ないと思いますよ。
すいません
> 対処2のh1タグをdivで囲っているのは、なぜですか？
これについてですが、<div class="bg">が追加されているので、<div class="nav_box">を削除して
h1タグにクラス指定をしてpositionの指定しても良いのか？を聞きたかったんですが
言葉足らずですいませんでした。
> <div class="bg">が追加されているので、<div class="nav_box">を削除してh1タグにクラス指定をしてpositionの指定しても良いのか？
全然良いと思います！
なるべくyesman さんが作成したhtml構造で実現した方が良いかと思い敢えてそのままにしておきました。<div class="bg">も追加したわけはなくpタグをdivに変更してclassを付与しただけとなります。
ありがとうございます！
すごい勉強になりました。
お世話になりました。
あなたの回答
tips
プレビュー
