blog
blog-sp

今の時代、プログラミングの勉強、
何から始めていいかわからない人は、
HTML&CSSから始めてみるべきだ!

第30回 固定したければposition: fixed;

2021.09.08

headerのナビゲーションメニューや画像などをスクロールに合わせて(固定して)移動させたいときに使用するの

が、CSSセレクターの「position: fixed;」です。

これを使用すると、画像をスクロールしてもそれに合わせてメニューなどが移動してくれるので、

どこか違うページにジャンプしたい、というときに、わざわざスクロールを上部まで戻さなくても

すぐにメニューをクリックできるという利点があります。

ユーザビリティーの向上のためのセレクターということもできます。

ただ、固定をしてしまうと、それ以外の要素はそのすぐ下に配置されるので、すなわち

重なって表示されるので、重なって表示されたくないときは、

固定した要素のすぐ下の要素は、固定した要素のheight分、下げる必要があります。

固定した要素のheightが100pxだった場合、その下の要素のtopを100px下にずらす作業が必要、ということです。

これを、ある程度ページを作成してからやろうとすると、レイアウトが崩れることもあるので、

やるなら早めにやることをお勧めします。

       

コメントを残す

メールアドレスが公開されることはありません。

※コメントの表示は管理者の承認が必要です。