position: fixed; を指定したときにwidth: 100%;を指定したらモバイル表示がおかしくなった話

サムネCSS
スポンサーリンク
サムネ

今回は、position: fixed; を指定したときにwidth:100%;(画面幅いっぱい)を指定する方法を解説していきたいと思います。

こんにちは!夏の終わりが寂しいマダラ蝶です。最近涼しくなってきましたよね。今回は僕が模写していたときに悩んだこととその解決法を備忘録としてブログに記録したいと思います。

今回の備忘録はこんな方におすすめ!

  • position: fixed;について理解したい!
  • position: fixed;を使ってwidth:100%を指定してモバイル端末で表示を確認してみるとおかしい
  • 幅に指定できる値の単位である”wh”ってなに?
タピるマダラ蝶

position: fixed;を使ってwidth:100%を指定したら、モバイル端末で確認したときにその要素の幅が大きくなりすぎてしまったんだけど…といった悩みを解決していきます!

スポンサーリンク

position: fixed;とは?

position: fixed;は画面の決まった位置に要素を固定させたいときに使います。

このように、スクロールしても位置が変わらないメニューバーやソーシャルボタンを表示したいときなんかに使うと便利です。

position: fixed;にwidth:100%;を指定するとモバイル画面で大きくなりすぎる件

まずこの画像を見てください。

固定ヘッダーにwidth:100%;を指定した時の画像

これは下のようなCSSを書きました。

#fade-header {
    height: 52px;
    width: 100%;
    background: yellow;
    position: fixed;
    z-index: 50;
}

このようにwidth:100%;を指定すると画面幅より大きくなってしまい、モバイル画面が、おかしなことになってしまいました。
この現象の原因と解決策を調べたので共有していきたいと思います。

position: fixed;は親要素にviewportをとる

position:fixed;を設定したとき、width: 100%;を設定するとその100%は何に対しての100%なのでしょうか?positionを設定した要素の親要素はviewportになります。そのため、pc画面のときは画面幅いっぱいになります。(ブラウザウインドウの表示領域がviewportになる)しかし、モバイルにしたときはモバイルのブラウザ幅によって変わってしまうため、width:100%;を指定すると画面幅より大きくなってしまうと考えられます。

viewportとはなにか?

viewport(ビューポート)とは、日本語に訳すと「表示領域」という言葉がしっくりきます。例えば、デスクトップ環境(PCなど)のブラウザなどでは、ブラウザウインドウの表示領域がviewportになります。

width: 100vw;を指定する。

この問題に対する解決方法はwidth: 100vw;を指定することです。width: 100%;ではviewportに対して100%を指定するのですが、width: 100vw;を指定することで実際のブラウザ幅に対する横幅(ここではスマホ画面の幅)をとることができるので画面幅丁度に幅を設定することが出来ます。

まとめ

今回はposition: fixed; を指定したときにwidth:100%;(画面幅いっぱい)を指定する方法を解説しました。固定ヘッダーを作成するときに悩む内容だと思うのでそんな悩みを解決する手助けになれたらいいなと思います。

コメント

タイトルとURLをコピーしました