css position fixedで上部固定ヘッダーのサイトを作る方法
サイト名やメニューなどのヘッダーが固定されていて、下にスクロールしても常にヘッダーが上部に固定されているサイトをよく見かけますよね。あれは一般的に「固定ヘッダー」というそうです。
私も別のサイトで使用したこともありましたが、今回は固定ヘッダーの作り方を記事にしてみたいと思います。
PCでは固定なし・モバイルのみ固定というパターンが多いので、そのパターンで解説していきます。
サンプル
まずはサンプルです。
以下のようなサイト（ページ）を作っていきます。
白いヘッダーは固定されておらず、下にスクロールすると見えなくなります。
下にスクロールしても白いヘッダー部分が固定されています。
positionの使い方
固定ヘッダーは、cssでヘッダー要素を固定することで実現しています。
要素の固定はpositionプロパティで行います。
positionプロパティとは
cssのpositionは、「要素の位置を決める」ためのプロパティです。
■値
relative
本来の表示を基準として、指定した位置に表示させる。
absolute
親要素を基準として、指定した位置に表示させる。
fixed
画面の表示を基準として、画面の決まった位置に表示させる。
位置の指定は以下に数値（主にpx）で行います。
- top（基準の上からの位置）
- bottom（基準の下からの位置）
- left（基準の左からの位置）
- right（基準の右からの位置）
各値の使い方などは色々なサイトに記載があるため、今回は割愛したいと思います。
今回の目的である固定ヘッダーを作るために、position:fixedを使っていきましょう。
html
分かりやすくするために、metaタグなどは省略しています。
viewportの設定も忘れずしましょう。
<!doctype html>
<html lang="ja">
<head>
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0">
<title>fixed mobile sample</title>
</head>
<body>
<header>
ヘッダー
</header>
<div class="wrapper">
<div class="main">
メイン
</div>
<div class="side">
サイド
</div>
</div>
<footer>
フッター
</footer>
</body>
</html>
css
PC用とモバイル用のcssを記載していきます。
body{
margin:0;
padding:0;
box-sizing: border-box;
}
header{
width:100%;
height:50px;
background:#f5f5f5;
}
.wrapper{
display:flex;
height:1000px;
}
.main{
width:75%;
background:#008080;
}
.side{
width:25%;
background:#d3d3d3;
}
footer{
height:100px;
background:#000;
color:#fff;
}
/////*モバイル用css*/////
@media screen and (max-width:480px){
header{
position:fixed;
top:0;
left:0;
}
.wrapper{
display:block; /*メインとサイドの横並び解除*/
height:1000px;
padding-top:50px;
}
.main{
width:100%;
height:700px;
}
.side{
width:100%;
height:300px;
}
footer{
height:100px;
}
}
cssのモバイル用で、headerにposition:fixed;、そしてtopとleftが0となっています。
すなわち常に画面上の上と左ぴったりくっついて表示するよう指定されているわけですね。
これで上記のように、モバイルではヘッダーが常に上部に固定されるようになるはずです。
positionを使うとサイト作成に色々応用ができるため、ぜひマスターしたいですね！
