ランディングページなどの縦に長いページでは、スマートフォンの小さな画面で表示するとページ上部のメニューまで戻りにくくなってしまいがちです。
このような場合、ページのヘッダー部分を画面上部に固定表示をして、常に表示しておくことができます。グローバルメニューから各ページにいつでも遷移することができるので、回遊率を高めることも期待できます。
positionプロパティ
positionプロパティには固定表示をさせるfix以外にも、配置に関する様々な操作をすることができます。absoluteやrelativeをfixとともに自在に扱えるようになれば自身の思い通りの配置で、回遊率をさらに上げるサイト作りができます。
是非、以下も合わせて読んでみてください。
【実例あり】position:「absolute」「relative」でレスポンシブECサイトのレイアウトを！
今回作成するページ
http://kan.aispr.jp/positiontest
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;
}
}
対応ブラウザについて
しかしこのposition:fixedでの固定表示、最新のiOSやAndroidには対応していますが、iOS4以前、Android2.3.x以前のブラウザでは対応しておりません。
それらのブラウザで固定表示を対応させるには、jQuery MobileやJavaScriptを使って対応させましょう。
参考：iPhone、Android position:fixed 対応状況と対応方法
まとめ
上部にメニューを固定させることでグローバルメニューへ簡単にアクセスでき、回遊率や滞在時間のアップが期待できる反面、デメリットとして、画面幅を占有してしまうため表示部分が狭まってしまいます。
上手くバランスを取ってユーザーが使いやすいサイト作りを心がけてください。
また、サイト最前面にコンテンツを表示させながらfixさせるモーダルウィンドウの実装方法もまとめていますのでご覧ください。
モーダルウィンドウを活用して簡単にWEB接客を導入する方法
上林
