LoginSignup
2
2

More than 5 years have passed since last update.

position : fixed で指定したナビボタンを任意の位置に配置する

Last updated at Posted at 2018-08-08

ハンバーガーボタンをスクロールに追随するように配置するために position:fixed を指定しました。

position:fixed を指定すると、配置する位置は topleftright などで表示領域全体に対しての位置指定しかできません。

デザインの関係で、1920px で以上で表示したときは、1920px の右上にハンバーガーボタンを設置したかったのですが、単純に px だけでは指定ができませんでした。

css.jpg

単純に px 指定だけでは任意の位置に指定することはできませんが、calc を使えば、任意の位置(1920px の右上)に配置することができます。

.btn {
  right: calc((100% - 1920px) / 2);
}

100% は表示領域の最大サイズです。そこから 1920px を減算することで、1920px 以上の余白を計算できます。

最初は、right: calc((100vw - 1920px) / 2); として 100% ではなく、 100vw と指定していました。
この指定だとブラウザのズーム機能で縮小すると左側に少しズレが生じました。
vw はスクロールバーを含まないサイズです。スクロールバーがあると、その分ズレが生じたのかと思います。
100%だと問題なく表示されます。

求められる値は、左右をあわせた余白のサイズなので、2 で除算すると片方の余白を計算できます。

1921px 以上で表示したときだけにスタイルを適用したいときは、メディアクエリで @media screen and (min-width: 1921px) 内で指定すれば 1921px 以上で表示したときだけにスタイルを適用できます。

.btn {
    right: 0;
}

@media screen and (min-width: 1921px) {
    .btn {
        right: calc((100% - 1920px) / 2);
    }
}

必要最低限の記述しかしていませんが、 1920px までは right:0 で、 1921px 以上になったら right: calc((100% - 1920px) / 2); を適用するのがいいです。

calc を使うことで、fixed で指定しても任意の位置にナビボタンを配置することができます。

※そもそも、ハンバーガーメニューのUIに賛否あると思いますが、是非は問いません。

2
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
2