cssでメニューを固定表示させる

縦に長いサイトはスマホ表示にするとページが長くなってしまいます。
メニューがスクロールと一緒に流れてしまうと、メニューがある位置まで画面をスクロールさせないとならなくなるので、ユーザーにとって非常にページ移動がしづらいサイトになってしまいます。
そこで、ユーザビリティをよくするための方法としてはいくつか方法があります。

今回はメニューバーを常に画面に固定して表示する方法です。

今回使うのはposition: fixed;です。
固定したいタグのクラスにこのようなCSSを追加します。

CSS

header {
    position: fixed;
    top: 0;
    left:0;
}

これでメニューを固定することができます。

しかし、固定しただけだと、ページの初めと終わりにメニューが来た時に、コンテンツがメニューバーの後ろに隠れてしまいます。
その時は、コンテンツのボックスにマージンを追加してメニューバーと被らないようにしましょう。

CSS

・メニューバーが上の場合

box {
    margin-top: 60px;
}

・メニューバーが下の場合

box {
    margin-bottom: 60px;
}

これでメニューが常に画面内に表示され、いつでもメニューにアクセスできるようになります。
いちいちメニューバーを探さなくていいので、ユーザーのストレスも軽減できますし、サイト内の回遊率も上げることができます。

しかし、画面が常に表示されるメニューバーによって圧迫されてしまうので、メニューやサイト内のアイテムの大きさなどもよく考えてデザインする必要がありそうですね。

以上、まだまだコーディング勉強中の遠藤でした。