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

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

ただいまの
回答率

90.48%

  • HTML5

    4193questions

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

  • CSS3

    2145questions

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

画面上部に固定したヘッダーがbody枠を超えて右にずれる

解決済

回答 3

投稿 編集

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

polynn

score 4

参考サイトを参考にしてヘッダーの画面上部固定に成功したのですが、画面内のaタグにカーソルを乗せたときに、画像のようにbody枠を超えて右側にヘッダー枠がずれてしまう現象が起きるようになりました。
画像
(jsで指定した78pxより下に行くとずれる。それより上でもaタグをマウスオーバーをすると、ヘッダーはずれませんが右側に同じように隙間が出来ます。)
調べてみると上部固定でアンカータグのズレが起こるなどの記事が多くあったのですが、どれも自分のとは場合が違うようなので解決に困っています・・・それっぽいサイトがそうなのかなと思うのですが、ただこのコードまんまコピペしても動作しなくてつらいのでここで解決方法を聞こうと思いました!教えてください!

追記:画面サイズを小さくするとこの現象がなくなりました
cssファイル2つgitにあげましたのでぜひ見てください ぽりんのgit みれますか?

コード
<body>
<jsp:include page="header.jsp" flush="true" />

<div class="flexslider">
<ul class="slides">
<li><img src="img/snowShovel.jpg" /></li>
<li><img src="img/worldTrip.jpg" /></li>
</ul>
</div>

<!-- モーダルウィンドウを呼び出すボタン -->
<section class="sample1">
<article>
<ul>
 <li>
<figure class="snip1212">
  <img src="img/img01.jpg" alt="sample74" width="400" height="300">
  <figcaption>
    <h2>Jason Response</h2>
    <p>Just makes people try to do everything at once.</p>
  </figcaption>
  <a href="#0"  data-toggle="modal" data-target="#myModal"></a>
</figure>
  </li>
</ul>
</article>
</section>

<!-- モーダルウィンドウの中身 -->
<div class="modal fade" id="myModal">
  <div class="modal-dialog">
    <div class="modal-content">
     <div class="modal-right">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h1 class="modal-title">Modal タイトル</h1>
      </div>
      <div class="modal-body">Modalああああ</div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary" data-dismiss="modal">閉じる</button>
      </div>
     </div>
      <img src="img/img01.jpg">
    </div>
  </div>
</div>
</body>
コード
   $(".hover").mouseleave(
    function() {
      $(this).removeClass("hover");
    }
  );


  $(function() {

      //ロード or スクロールされると実行
      $(window).on('load scroll', function(){

          //ヘッダーの高さ分(80px)スクロールするとfixedクラスを追加
          if ($(window).scrollTop() > 78) {
              $('header').addClass('fixed');
          } else {
              //80px以下だとfixedクラスを削除
              $('header').removeClass('fixed');
          }

      });

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

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

  • 退会済みユーザー

    退会済みユーザー

    2016/05/17 18:20

    画像つけわすれていませんか?

    キャンセル

  • chiro.0519

    2016/05/17 18:23 編集

    スクリプトの記述もお願いします。

    キャンセル

  • polynn

    2016/05/17 19:55

    添付忘れ失礼いたしました。画像とスクリプトの記述追加いたしましたのでよろしくお願いします!

    キャンセル

回答 3

+1

書かれているコード部分で推測して書くのであれば、box-sizing の指定くらいです。

header {
    overflow: hidden;
}
header,
header ul,
header li a {
    box-sizing: border-box;
}

また、ul にはデフォルトで margin padding が付いているので、書かれているコード以外のどこかで指定されていると思います。
その部分のコードが押し広げている可能性と、header に続く要素(本体エリア)自体の書き方に問題がある可能性もあります。

たとえば、青空の背景が画像なのであれば、下記のように引き伸ばす必要がありますし、背景として指定しているとすればその要素内の要素に右マージンがとられていたりという可能性もあります。

.title > img {
    width:100%;
}


全体のコードがあればもう少し適切にお答えできるかもしれません。

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2016/05/17 21:31

    追記しました(ゝω・)vキャピ

    キャンセル

checkベストアンサー

0

width:100%;を指定している要素にpadding:10px 15px;のように左右のpaddingを設定すると親要素よりもpaddingの分大きくなってしまいます。

header li aで指定されているwidth:100%;を取ってみてはどうでしょうか

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2016/05/17 20:18

    widthとpadding消してみたのですがダメです

    キャンセル

  • 2016/05/17 20:27

    下記の2点確認してみていただけますか
    1 ブラウザで見た際に横スクロールバーがでているか
    2 現象を確認しているhtmlに質問文以外のコードは入っているか、入っている場合はpolynnさんの環境で質問文にあるコードのみで現象が再現するか一度確認してみてください。


    キャンセル

  • 2016/05/17 21:30

    1.出てます
    2.質問文にあるコードのみでは現象は起きないです

    キャンセル

  • 2016/05/17 21:58

    追記に「画面サイズを小さくするとこの現象がなくなりました 」とあるのですが、これは画面サイズを小さくした場合にはそもそも現象が起きないのか、画面サイズを小さくすることで現象が解消されたのかどちらでしょうか。

    gitのcssや追記されたhtmlも確認したのですがやはり手元の環境では再現はできませんでした。

    かなり的はずれな推測になりそうですが、そもそもの「aタグにカーソルを乗せたときに」というのが勘違いでflexsliderが動作した際に一瞬幅が広がっている・・・
    (これは一旦flexsliderの動作を止めた状態で確認すれば検証できると思います。)

    といった感じで一度先入観を捨てて0から考えてみるのもいいかもしれません。

    キャンセル

  • 2016/05/17 22:33

    かなり的確なご推測ありがとうございます!スライダーのnext prevにright:-50pxとleft:-50pxがついてたので消してみたら直りました!(☝ ՞ਊ ՞)☝

    キャンセル

0

再現してみたのですが、特に不具合が確認できなかったのですが。。。
クラスhoverが見当たらなかったので、.hoverは関係ないですか?

bodyからはみ出しているのでは無くて、クラスtitle の画像が100%で無い為はみ出してみえているとかは考えられないでしょうか?

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2016/05/17 22:37

    ヘヘッ・・・w

    キャンセル

関連した質問

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

  • HTML5

    4193questions

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

  • CSS3

    2145questions

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