ヘッダー（メニューバー）を固定する方法！動画付き「過保護説明」

今回は、ヘッダーを固定する方法を説明していきます。

下記のサイトのように、ヘッダー（メニューバー）が固定されていることって、ありますよね？

https://www.airbnb.jp/host/homes

検索者にとっても、いちいちトップに戻らなくて済むし、サイト運営側としても、クリックしてほしい部分を常に表示出来るので、成約などにも結び付くかもしれません(^^)

今回は、そのコードの書き方をご紹介していきますね！動画も合わせて参考にしてみてください(^^)

固定するのに便利なコードはこちらです！

固定するのに使用するコードは、position: fixed; ですね！

今回は上記のサイトをモデルに、実際のコードを見て行ってみましょう(^^)

実際のコードはこちらです。

一つづつ解説していきますね！

position: fixed;

こちらが＜固定＞のコードになります。

画面がスクロールしても動かないぞ！っていう力強い指定になります笑

width: 100%;

幅の指定ですね！こういったデザインの場合、幅は100％がいいかな？と思いますが、練習で、幅80％にするとどうなるか？っていうのも、是非やってみてください。

また、ヘッダーの高さの部分も大丈夫ですね(^^)

top: 0;

プラウザのデフォルトにより、基本的に、サイトの周辺に8pxほどの余白が出来ます。

ただ、こういったデザインの場合、それも若干変なので、余白をつぶしておきます。

border-bottom: 1px solid #f5f5f5;

ヘッダーの下線部分ですね！この部分は、デザイン的にあってもなくてもいいかな？と思います。お好みで♪

background-color: white;

背景色です。こういったデザインの場合、背景色がないと、スクロールされる画像が丸見えですので、白を入れておくといいかなと思います(^^)

注意したいことっ！！！

とっても便利なposition: fixed;ですが、イメージ的には、浮いた状態で固定されている感じになります。

するとどういうことになるかというと、background-color: white;を指定している時は、なかなか気づかないですが、、、

背景色をなくしてみると。。

こんな感じで、下のコンテンツが上に上がってきて隠れてしまいます( ﾟДﾟ)

ですので、下のコンテンツにmargin-topを指定してあげるようにしてください！

今回ですと、この背景画像の部分にmargin-topを指定する感じになりますね。

まとめ！

ちなみに、フッターの場合でも同じですので、是非試してみてください。

以上です！