メニューを固定表示させるposition;fixedでサイトの回遊率をアップ！

アイキャッチ画像

ランディングページなどの縦に長いページでは、スマートフォンの小さな画面で表示するとページ上部のメニューまで戻りにくくなってしまいがちです。

このような場合、ページのヘッダー部分を画面上部に固定表示をして、常に表示しておくことができます。グローバルメニューから各ページにいつでも遷移することができるので、回遊率を高めることも期待できます。

1. positionプロパティ
2. 今回作成するページ
3. 固定表示をさせる方法
4. 対応ブラウザについて
5. まとめ

positionプロパティ

positionプロパティには固定表示をさせるfix以外にも、配置に関する様々な操作をすることができます。absoluteやrelativeをfixとともに自在に扱えるようになれば自身の思い通りの配置で、回遊率をさらに上げるサイト作りができます。

是非、以下も合わせて読んでみてください。
【実例あり】position:「absolute」「relative」でレスポンシブECサイトのレイアウトを！

今回作成するページ

http://kan.aispr.jp/positiontest
サンプルQRコード
QRコードを読み取って是非スマートフォンで確認してみてください。（固定表示はスマートフォンのみに適用されるよう調整しています）

固定表示をさせる方法

要素を固定表示させるには、CSSのposition:fixedを利用します。

header {
    position: fixed;
}

この指定は画面に対して要素の表示位置を指定できるようにするものです。画面の左上を基点に位置を指定できるようになるので、それぞれ上から、左からの位置を「0」に指定すると左上に固定で表示されます。

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

この指定をすると後続のコンテンツがページの上から順に表示されるようになるので、positionで指定したコンテンツと重なってしまいます。

このままでは後続のコンテンツが下に入り込んだ状態となるので、コンテンツ間の余白をmarginで調整します。

nav {
    margin-top: 50px;
}

marginを指定しない場合（左）とmarginで50pxの余白を持たさた場合（右）の比較。marginの幅は実機で確認しながら調整しましょう。

最後にメディアクエリを使い、480px以下でこの指定が適用されるように調整すればOKです。

/*===============================================
  横幅480pxまで（固定表示）
===============================================*/
@media screen and (max-width: 480px){
header {
    position: fixed;
    top: 0;
    left:0;
} 

nav {
    margin-top: 50px;
}
}