［WEB開発］ヘッダーを固定にする方法

WEB作成のレイアウトで一番多いのは、ヘッダーの固定しているレイアウトです。その他にフッター固定、サイドバー等のレイアウトもありますが、まずはヘッダー固定が基本なのでこれを説明し、その後に他のレイアウトに拡張していきたいと思います。

それでは今回は、このヘッダー固定の方法をご紹介します。

ヘッダーの固定方法

以下の順序で、説明しています。

基本となるHTMLを作成
ヘッダー部の設定

基本となるHTMLを作成

説明するために基本となるHTMLを作成して、それを元にしてCSSの設定を加えていきレイアウトを完成していきます。

<!DOCTYPE html>
<html lang=“ja”>
<head>
<meta charset=“UFT-8”>
<title>ヘッダーを固定にするレイアウト</title>
</head>
<body>
<div class="header"> ヘッダ部 </div>
<div class="container">
<div class="content"> コンテンツ部 </div>
</div>
</body>
</html>

HTMLに基本レイアウトを設定

ヘッダー部を黒背景にし、メインコンテンツは画面からはみ出るようにレイアウトを作成します。作成したHTMLをでは、メインコンテンツをスクロールするとヘッダー部も固定ではなくスクロールしてしまいます。

body {
margin: 0;
}
.container {
}
/* ヘッダ */
.header
{
position: fixed;  /* 固定設定 */
color: #ffffff;
width: 100%; /* 横幅100%　*/
height: 140px; /* 縦幅140px */
background-color:#444; /* 背景色(黒) */
}
.content {
padding-top: 140px;  /* ヘッダの縦幅分 */
height: 150vh;
background: #5f9cda;
}

出来上がりは、以下のようになります。

ヘッダー部の設定

それでは、ヘッダ部を固定化するCSSの設定をしていきます。

body {
margin: 0;
}
.container {
top-padding:140px 0; /* 上に140pxを余白を取る */
}
/* ヘッダ */
.header
{
position: fixed; /* ヘッダーの固定 */
color: #ffffff;
width: 100%; /* 横幅100%　*/
height: 140px; /* 縦幅140px */
background-color:#444; /* 背景色(黒) */
}
.content {
height: 150vh;
background: #5f9cda;
}

class header部を固定にするため、position を設定
メインコンテンツの class container部が隠れるため、 top-paddingを設定

この設定でヘッダ部が固定されます。次回は更にフッター固定について説明したいと思います。