Programing beginner by koala

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

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

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

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

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

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

Contents

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

固定するのに使用するコードは、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を指定する感じになりますね。

まとめ!

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

以上です!

About me

IT業界6年目にして、プログラミングの勉強を始めたkoalaです。

プログラミング用語が難しすぎる!ということで、初心者が初心者に解説するという型破りなブログを開設してみました。

専門用語少な目、分かりやすくをモットーにしています。

>>続きはこちら

今日の名言

クリックすると、あなたの心に響く誰かの名言が表示されます♪

 

今日の名言

 
※あなたの名言募集しています!詳細はこちら