質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.33%

  • HTML5

    4317questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

  • CSS3

    2220questions

    CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

position 画面サイズによって崩れる

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 236

yesman

score 6

position:absoluteで指定した画像を
chromeのデベロッパーツールで確認すると
spのサイズiphonの5~8に変更する度に位置がずれてしまいます。

自分の理解のなさと初歩的なミスをしているのだと思うのですが、
分かりませんお願いします。

コード<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<title></title>
<link href="css/reset.css" rel="stylesheet" type="text/css">
<link href="css/style.css" rel="stylesheet" type="text/css">
<script>
$(function(){
  $('.menu-trigger').on('click',function(){
    $(this).toggleClass('active');
    $('.g-nav').slideToggle();
  });
});
</script>
</head>
<body>
    <header>
     <a class="menu-trigger">
  <span></span>
  <span></span>
  <span></span>
</a>
<nav class="g-nav">
  <ul class="list">
    <li class="item"><a href="">ホーム</a></li>
    <li class="item"><a href="">お知らせ</a></li>
    <li class="item"><a href="">キャリスターについて</a></li>
    <li class="item"><a href="">取扱い車種</a></li>
    <li class="item"><a href="">会社概要</a></li>
    <li class="item"><a href="">よくあるご質問</a></li>
    <li class="item"><a href="">採用情報</a></li>
    <li class="item"><a href="">お問い合わせ</a></li>
    <li class="item"><a href="">プライバシーポリシー</a></li>
  </ul>
</nav>
    <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>
    </header>
</body>
</html>
コード@charset "utf-8";
/* CSS Document */

html{
    font-size:62.5%;}
html,p,ul,ol,li,a{
  text-decoration:none;
  list-style:none;
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
    ::i-block-chrome, body {
        font-feature-settings: "pkna";
    }
}
body{
    text-align:center;
    font-size:1.6rem;/* 16px */
    line-height:1.5;
    -webkit-text-size-adjust: 100%;
  font-feature-settings: "palt";
}

img{
    width:100%;
    hight:auto;
    vertical-align: bottom;
}
/*ヘッダーメニュー開始*/
.menu-trigger,
.menu-trigger span{
  display: inline-block;
  transition: all .4s;
  box-sizing: border-box;
  cursor :pointer;
}
.menu-trigger{
  position:fixed;
  width: 50px;
  height: 50px;
  z-index: 2;
  left:0;
}
.menu-trigger span{
  position: absolute;
  background: #fff;
  width: 30px;
  height: 3px;
  left: 0;
  right: 0;
  margin: auto;
}
.menu-trigger span:nth-of-type(1){
  top: 14px;
}
.menu-trigger span:nth-of-type(2){
  top: 0;
  bottom: 0;
}
.menu-trigger span:nth-of-type(3){
  bottom: 14px;
}
.menu-trigger.active span:nth-of-type(1){
  -webkit-transform: translateY(9px) rotate(-45deg);
    transform: translateY(9px) rotate(-45deg);
}
.menu-trigger.active span:nth-of-type(2){
  opacity: 0;
}
.menu-trigger.active span:nth-of-type(3){
  -webkit-transform: translateY(-9px) rotate(45deg);
    transform: translateY(-9px) rotate(45deg);
}
.g-nav{
  display: none;
  position:fixed;
  top: 0;
  background:#000000e8;
  width: 100%;
  height: 100%;
}
.g-nav .list{
  padding: 50px 10px 0;
}
.g-nav .list .item{
  line-height:1.3;
  border-bottom: 1px solid #ffffff40;
}
.g-nav .list .item a{
  display: block;
  text-align: center;
  text-decoration: none;
  color: #ffffffe8;
  padding: 15px 0;
}
.nav_box{
    position: relative;
    height: 100%;
}
.logo_img{
    position:absolute;
    width:100%;
    top:-150px;
    left:0;
}

修正したい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>
の部分になります。
分かりにくい場合、修正依頼の連絡をください。修正します。
宜しくお願いします。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • i_sugiyama_tomo

    2018/07/27 16:22

    imgタグのCSS「height」が「hight」となってますが、これは写し間違いですか?正しい綴りにしたらどうなりますか?

    キャンセル

  • yesman

    2018/07/27 18:36

    ご連絡ありがとうございます。修正しました。特に変化はないですね、画面サイズを変えると位置がズレてしまいます。

    キャンセル

  • easy_no_easy

    2018/07/28 09:49

    位置がどうずれるんですか??

    キャンセル

  • yesman

    2018/07/28 12:22

    ご連絡と、ご回答ありがとうございます。背景画像の上にロゴの画像を配置したいのですが、画面の横幅サイズの変更によって縦位置がずれるのを修正したいです。回答の内容を試してみたいと思います。

    キャンセル

回答 1

checkベストアンサー

+1

PCでは横幅が固定なので、top: -150px;は当然位置がずれませんが、
SPでは横幅が可変するので、top: -150px;は当然位置がずれます。

ずれる原因としては、横幅のサイズが変化することで縦幅が変化します。
position位置がpx指定なので位置が次第にずれていきます。

対処方法1
pxではなくvwを使用する。
vw = viewport width => ビューポートの幅に対する割合

vw使用時のサンプル
※ロゴ画像のサイズ感が不明だったのでCSSでスタイルを付与しています
jsFiddle サンプル

対処方法2
html構造を変更する
ロゴ画像を背景画像の子要素として扱う
背景画像位置を起点とするためtop: -XX;としなくて済む

変更前の構造

<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>


変更後の構造

<div class="bg">
 <img src="https://dummyimage.com/400x200" alt="背景">
 <div class="nav_box">
  <h1 class="logo_img">キャリスター</h1>
 </div>
</div>


構造変更後のサンプル
※ロゴ画像のサイズ感が不明だったのでCSSでスタイルを付与しています
jsFiddle サンプル

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/07/28 12:47

    ご回答ありがとうございました。
    対処方法2を利用して、位置が固定できました!
    ありがとうございます。
    質問なんですが、対処2のh1タグをdivで囲っているのは、なぜですか?
    <div class="nav_box">
      <h1 class="logo_img">キャリスター</h1>
     </div>
    もう一つ、ロゴの画像のサイズを変更したい場合
    .nav_boxのwidthの100%を90%に変更したいと思うのですが、正しいでしょうか?
    何度もすいません。ご確認お願いします。

    キャンセル

  • 2018/07/28 12:53 編集

    うん??

    > 対処2のh1タグをdivで囲っているのは、なぜですか?
    質問者様が掲載したコードをコピペしてネストさせただけですが。。。何故と申されても。。。(~_~;)

    > .nav_boxのwidthの100%を90%に変更したいと思うのですが、正しいでしょうか?
    widthを100%から90%にするのが正しいかどうかは私の方では判断できません。
    質問者様が実現したいデザイン通りになっていれば問題ないと思いますよ。

    キャンセル

  • 2018/07/28 18:36

    すいません
    > 対処2のh1タグをdivで囲っているのは、なぜですか?
    これについてですが、<div class="bg">が追加されているので、<div class="nav_box">を削除して
    h1タグにクラス指定をしてpositionの指定しても良いのか?を聞きたかったんですが
    言葉足らずですいませんでした。

    キャンセル

  • 2018/07/28 20:50

    > <div class="bg">が追加されているので、<div class="nav_box">を削除してh1タグにクラス指定をしてpositionの指定しても良いのか?

    全然良いと思います!
    なるべくyesman さんが作成したhtml構造で実現した方が良いかと思い敢えてそのままにしておきました。<div class="bg">も追加したわけはなくpタグをdivに変更してclassを付与しただけとなります。

    キャンセル

  • 2018/07/28 20:52

    ありがとうございます!
    すごい勉強になりました。
    お世話になりました。

    キャンセル

同じタグがついた質問を見る

  • HTML5

    4317questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

  • CSS3

    2220questions

    CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。