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

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

ただいまの
回答率

87.93%

レスポンシブサイト、iPhone5sにて背景画像中央に見出し画像を縦横中央に配置したところ…

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 1,481

score 1072

はじめて質問いたします。
表題の通り、iPhoneでの実機検証可能な方に質問です。
お恥ずかしいのですが、実機持っていません…

本題、レスポンシブな背景画像の縦横中央位置に見出し画像をのせるのですが、以下のようにしました。

* {
  margin:0;
  padding:0;
}
img {
  border:0;
  vertical-align:top;
}
body {
  text-align:center;
}
#wrapper {
  margin:0 auto;
  width:960px;
}
#h1-area {
  position:relative;
  width:100%;
  height:auto;
}
#h1-bg {
  width:100%;
  height:auto;
}
#h1-area h1 {
  position:absolute;
  left:0;
  top:50%;
  width:100%;
}
#h1-area h1 img {
  margin-top:-18px;/* 見出し画像高の半分 */
  max-width:100%;
  height:auto;
}
@media screen and (min-width : 768px) and (max-width : 959px) {
  #wrapper {
    width:768px;
  }
}
@media only screen and (max-width : 767px) {
  #wrapper {
    width:90%;
  }
}
HTMLは以下、
<!-- Wrapper Start -->
<div id="wrapper">
  <!-- h1 Area Start -->
  <div id="h1-area">
    <img src="images/h1_bg.jpg" id="h1-bg" alt="" />
    <h1><img src="images/h1.png" alt="" /></h1>
  </div>
  <!-- h1 Area End -->
</div>
<!-- Wrapper End -->
これで、各種ブラウザでは、正常に見られるし、ブラウザ上のエミュレータでも、問題なく意図通りの表示になるのですが、
iPhoneで確認すると、h1画像の文字数によって、見え方が違うと指摘されてしまいました。
詳しく説明すると、h1画像は正常なようですが、背景の画像が、それぞれ、100%の大きさにならず、小さく表示されていて、背景の右側に隙間が出来てしまうとのことです。

| __本来の横幅__ |
| スマホでの見え方 |
こんな感じです。

とにかく実機が無いので、確認もテストも何も出来ず困っております。
お手数かけますが、回答をお待ちしております。
  • 気になる質問をクリップする

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 1

check解決した方法

0

すみません。自己解決しました。
id="wrapper" に overflow:hidden; だけのこと…

先方から渡されたスクショが見出しまでだったので、悩んでいたのですが、
全体像のスクショを拝見すると、wrapperごと右に余白が出ていたので、
これは、悩むところが違うぞ(笑)、となり、上記解決方法が導き出されました。

スマホあるあるなので、今後何もなくても、overflow:hidden;は入れたいと思います。
リソースの無駄遣い、すみませんでした。

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

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

  • ただいまの回答率 87.93%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

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

  • トップ
  • HTMLに関する質問
  • レスポンシブサイト、iPhone5sにて背景画像中央に見出し画像を縦横中央に配置したところ…