![](http://taekok.com/wp-content/uploads/2023/04/悩んでいる人-300x300.png)
CSSでヘッダーを固定させたままスクロールする方法は?
![](https://3.bp.blogspot.com/-VkaXRdIAzRU/WUdYwLM2msI/AAAAAAABE_E/Ob4pV2KxYAUvnkvQDhtTdY-lWeZWWbTkACLcBGAs/s800/kaisya_komaru_man.png)
ヘッダーを固定できないときや重なるときの対処方法は?
このようなお悩みをお持ちの方は多いのではないでしょうか?
ヘッダーを固定させたままスクロールする方法は、CSSでposition:fixedを使用するのが簡単でおすすめです。
固定ヘッダーが重なるときはposition: stickyで実装したり、ヘッダーと同じ幅の余白を入れたりするとよいでしょう。
本記事では、CSSを用いた固定ヘッダーの実装例について紹介しています。
JavaScritptを使った実装方法やフッターの固定方法も解説するので、サイトのユーザビリティを高めたい人は参考にしてください。
固定ヘッダーはユーザーの閲覧数アップやユーザビリティの改善を促す
![パソコン作業をしていう男性の後ろ姿](https://taekok.com/wp-content/uploads/2023/08/undraw_Programming_re_kg9v-1024x730.png)
固定ヘッダーは、スクロールしても画面外にヘッダーが消えることなく、ページ上部に固定させたまま表示することができます。
下記は固定ヘッダーを実装した例です。画面をスクロールしてみて、ヘッダーが常に上部に表示されていることを確認してみてください。
See the Pen 固定ヘッダー(CSSのみ) by taeko k (@taeko-k) on CodePen.
ヘッダーを固定するメリットは下記のとおりです。
- ユーザーの閲覧数アップにつながる
- ユーザビリティを高めることができる
ヘッダーメニューが上部に表示されていることでほかのページに飛びやすくなるため、閲覧数を上げることができます。
サイト画面内に他ページのリンクがなければ、ユーザーはそのままサイトを離脱してしまうかもしれません。
しかしヘッダーメニューを常に確認できる状態にしておけば、ほかのページも閲覧してくれる可能性が高まります。
また、ヘッダーを固定することでサイトの見やすさがアップするため、ユーザビリティを高めることができるでしょう。
その結果、サイト内に設置したリンクのクリック数がアップし、収益の向上にも期待ができるでしょう。
ヘッダーを固定して表示させる方法はCSS・JavaScriptのどちらも可能
![男性がパソコンを操作している](https://taekok.com/wp-content/uploads/2023/08/undraw_Coding_re_iv62-1024x588.png)
この章では、ヘッダーをサイト上部に固定する方法を解説します。
また固定ヘッダーは、CSSのみで実装する方法と、JavaScriptで実装する方法のどちらでも実装できます。
なるべく簡単に実装したい方には、CSSのみで実装する方法がおすすめです。
JavaScriptで実装する方法
まずは、JavaScriptで固定ヘッダーを実装する方法を解説します。
例題として、下記のような固定ヘッダーを作成します。
See the Pen 固定ヘッダー(にゃんブログ) by taeko k (@taeko-k) on CodePen.
スクロールすると、ヘッダーが常に上部に表示されるよう設定しています。
手順①:HTMLファイルを作成
まずは、HTMLを作成しましょう。下記コードをHTMLファイルにコピペしてください。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<!-- 自作のCSSファイルの読み込み -->
<link rel="stylesheet" type="text/css" href="style.css">
<title>固定ヘッダーの説明</title>
</head>
<body>
<!-- ヘッダーメニュー -->
<nav>
<div class="wrapper">
<ul>
<li class="item"><a href="#about">About</a></li>
<li class="item"><a href="#news">News</a></li>
<li class="item"><a href="#blog">Blog</a></li>
<li class="item"><a href="#contact">Contact</a></li>
</ul>
</div>
</nav>
<main>
<!-- aboutセクション -->
<section id="about">
<div class="wrapper">
<h1>About</h1>
<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキストテキストテキスト</p>
</div>
</section>
<!-- newsセクション -->
<section id="news">
<div class="wrapper">
<h1>News</h1>
<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキストテキストテキスト</p>
</div>
</section>
<!-- blogセクション -->
<section id="blog">
<div class="wrapper">
<h1>Blog</h1>
<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキストテキストテキスト</p>
</div>
</section>
<!-- contactセクション -->
<section id="contact">
<div class="wrapper">
<h1>Contact</h1>
<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキストテキストテキスト</p>
</div>
</section>
</main>
<!-- フッター -->
<footer>
<p>© 2023 pittolog</p>
</footer>
<!-- body直前でjQueryと自作のJSファイルの読み込み -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<!-- 自作のJSファイル -->
<script src="main.js"></script>
</body>
</html>
作成する際のポイントは下記のとおりです。
- </head>タグの直前で「自作のCSSファイル」を読み込む
- </body>タグ直前で「jQueryのスクリプト」と「自作のJSファイル」を読み込む
あらかじめ作成しておいた自作のCSSファイルを、</head>タグの直前で読み込みます。
またjQueryを読み込む際は、「jQueryのスクリプト」と「自作のJSファイル」が必要です。この2つのファイルは</body>タグ直前で読み込みましょう。
jQuery最新のスクリプトは、下記公式サイトで確認できるのでチェックしてみてください。
手順②:CSSを作成
続いて、CSSファイルを作成します。
下記コードをコピペして実装してみてください。
@charset "utf-8";
*{
margin: 0;
}
/******* ヘッダーのスタイル ********/
nav {
background: #fff;
width: 100%;
}
/* ヘッダーを固定させる */
nav.fixed {
position: fixed;/*fixedで固定*/
right: 0;
top: 0;
}
.wrapper {
margin: 0 auto;
max-width: 100%;
}
nav ul {
justify-content: flex-end;
display: flex;
list-style: none;
}
.item {
margin: 0 2em;
padding: 17px 0;
font-weight:bold;
}
.item a {
color: #48D1CC;
text-decoration: none;
}
.item a:hover{
color: #0000FF;
}
/******* ここから各セクションのスタイル ********/
h1 {
font-size: 1.25rem;
padding: 2rem 0;
color: #48D1CC;
font-weight:bold;
}
p {
line-height: 2;
color: #555A60;
}
section{
background-color: #F0FFF0;
padding: 2em;
}
section .wrapper{
max-width: 800px;
}
/******* ここからフッターのスタイル ********/
footer {
background-color: #4169E1;
padding:1em;
}
footer p {
font-size: .8em;
color: #fff;
max-width: 800px;
padding: 0;
text-align:center;
margin:0 auto;
font-weight:bold;
}
手順③:JSを作成
次に、JSファイルを作成します。
$(function() {
var pos = $("nav").offset().top;
var height = $("nav").outerHeight();
$(window).scroll(function () {
if ($(this).scrollTop() > pos) {
$("nav").addClass("fixed");
$("body").css("padding-top", height);
} else {
$("nav").removeClass("fixed");
$("body").css("padding-top", 0);
}
});
});
スクロールするとnav要素に「fixed」クラスが付与され、上部にヘッダーが固定されるという処理をしています。
CSSで実装する方法
ここからは、CSSのみで固定ヘッダーを実装する方法を解説します。
例題として、下記のような固定ヘッダーを作成します。
See the Pen 固定ヘッダー(CSSのみ) by taeko k (@taeko-k) on CodePen.
スクロールすると、ヘッダーが常に上部に表示されているのが確認できるかと思います。
手順①:HTMLファイルを作成
まずは、HTMLを作成しましょう。下記コードをHTMLファイルにコピペしてください。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<!-- 自作のCSSファイルの読み込み -->
<link rel="stylesheet" type="text/css" href="style.css">
<title>固定ヘッダーの説明</title>
</head>
<body>
<!-- ヘッダーメニュー -->
<header>
<h1>Pittolog</h1>
<nav class="nav">
<ul class="menu">
<li><a href="#about">About</a></li>
<li><a href="#news">News</a></li>
<li><a href="#blog">Blog</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>
<main>
<!-- aboutセクション -->
<section id="about">
<div class="wrapper">
<h2>About</h2>
<p>テキストテキストテキストテキストテキストテキストテキストテキスト<br>
テキストテキストテキストテキストテキストテキストテキストテキスト</p>
</div>
</section>
<!-- newsセクション -->
<section id="news">
<div class="wrapper">
<h2>News</h2>
<p>テキストテキストテキストテキストテキストテキストテキストテキスト<br>
テキストテキストテキストテキストテキストテキストテキストテキスト</p>
</div>
</section>
<!-- blogセクション -->
<section id="blog">
<div class="wrapper">
<h2>Blog</h2>
<p>テキストテキストテキストテキストテキストテキストテキストテキスト<br>
テキストテキストテキストテキストテキストテキストテキストテキスト</p>
</div>
</section>
<!-- contactセクション -->
<section id="contact">
<div class="wrapper">
<h2>Contact</h2>
<p>テキストテキストテキストテキストテキストテキストテキストテキスト<br>
テキストテキストテキストテキストテキストテキストテキストテキスト</p>
</div>
</section>
</main>
<!-- フッター -->
<footer>
<p>© 2023 pittolog</p>
</footer>
<!-- body直前でjQueryと自作のJSファイルの読み込み -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<!-- 自作のJSファイル -->
<script src="main.js"></script>
</body>
</html>
手順②:CSSを作成
続いて、CSSファイルを作成します。下記コードをコピペ実装してみてください。
body {
padding-top: 60px; /* ヘッダーの高さ分の余白をいれ、うしろの要素が隠れないようにする */
}
/******* ヘッダーのスタイル ********/
header {
position: fixed; /*** ← fixedで固定 ***/
width: 100%;
height: 60px;
background: #CCC;
padding: 20px 60px;
box-sizing: border-box;
top: 0;
left: 0;
display: flex;
align-items: center;
/* ロゴとメニューを横並びにする */
display: flex;
justify-content:space-between;
}
header .nav .menu {
display: flex;
}
header .nav .menu li {
list-style: none;
margin-left: 40px;
}
header .nav .menu li a{
color: #B78D4A;
font-weight:bold;
text-decoration: none;
}
/******* ここからメインエリアのスタイル ********/
main {
text-align:center;
}
h2 {
color: #B78D4A;
text-decoration: none;
padding-top: 100px;
}
/******* ここからフッターのスタイル ********/
footer {
background: #CCC;
padding: 1em;
margin-top: 100px;
}
footer p {
font-size: .8em;
color: #fff;
max-width: 800px;
padding: 0;
text-align:center;
margin:0 auto;
font-weight:bold;
}
固定ヘッダーの実装例4パターンとフッターの固定方法を紹介
![男性が大きいmac画面を見ている](https://taekok.com/wp-content/uploads/2023/08/undraw_Code_review_re_woeb-1024x667.png)
この章では、よく使われる固定ヘッダーの実装例と、フッターを固定させる方法を紹介します。
今回解説する実装例は下記の5つです。
- スクロール後にヘッダーを固定させる方法
- スクロール後に色を変えながらヘッダーを出現させる方法
- スクロール後に上からヘッダーを出現させる方法
- スクロールでヘッダーの背景色を変化させる方法
- フッターを固定させる方法
1つずつ解説するので、参考にしてみてください。
スクロール後にヘッダーを固定させる
通常のヘッダーを、スクロール後に固定ヘッダーに変化させる方法を解説します。
下記が実装した例です。
See the Pen Untitled by taeko k (@taeko-k) on CodePen.
最初は普通のヘッダーとして表示されますが、スクロールすると同時にヘッダーが固定されているのがわかるかと思います。
以下で作成手順を解説していきます。
手順①:HTMLファイルを作成
まずは、HTMLを作成しましょう。下記コードをHTMLファイルにコピペしてください。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<!-- 自作のCSSファイルの読み込み -->
<link rel="stylesheet" type="text/css" href="style.css">
<title>固定ヘッダーの説明</title>
</head>
<body>
<!-- ヘッダー -->
<header id="header">
<ul class="menu">
<li>
<a href="#about">
<p>About</p>
</a>
</li>
<li>
<a href="#news">
<p>News</p>
</a>
</li>
<li>
<a href="#blog">
<p>Blog</p>
</a>
</li>
<li>
<a href="#contact">
<p>Contact</p>
</a>
</li>
</ul>
</header>
<main>
<div class="contents">
<!-- aboutセクション -->
<section id="about" class="item">
<div class="wrapper">
<h1>About</h1>
<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</br>
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</br>
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
</p>
</div>
</section>
<!-- newsセクション -->
<section id="news" class="item">
<div class="wrapper">
<h1>News</h1>
<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</br>
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</br>
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
</p>
</div>
</section>
<!-- blogセクション -->
<section id="blog" class="item">
<div class="wrapper">
<h1>Blog</h1>
<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</br>
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</br>
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
</p>
</div>
</section>
<!-- contactセクション -->
<section id="contact" class="item">
<div class="wrapper">
<h1>Contact</h1>
<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</br>
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</br>
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
</p>
</div>
</section>
</div>
</main>
<!-- フッター -->
<footer>
<p>© 2023 pittolog</p>
</footer>
<!-- body直前でjQueryと自作のJSファイルの読み込み -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<!-- 自作のJSファイル -->
<script src="main.js"></script>
</body>
</html>
手順②:CSSファイルを作成
続いて、CSSファイルを作成します。
通常のヘッダーとは別で、下記のようにfixed
クラスを作成しておきます。
/* 固定ヘッダー */
#header.fixed {
position: fixed;/* ←fixedで固定する*/
top: 0;
left: 0;
}
このfixed
クラスは後ほどJavaScriptで使用することになりますので、覚えておきましょう。
CSS全体のコードは下記になります。
body {
margin: 0;
}
/* 通常のヘッダー */
#header {
background-color: #4b6cb7;
z-index: 999;
width: 100%;
padding: 10px;
display: flex;
box-sizing: border-box;
}
#header .menu {
display: flex;
margin: 0;
}
#header li {
margin-right: 38px;
position: relative;
list-style-type: none;
}
#header li a {
color: #ffffff;
font-weight: bold;
text-decoration: none;
}
/* 固定ヘッダー */
#header.fixed {
position: fixed;/* ←fixedで固定する*/
top: 0;
left: 0;
}
/* コンテンツ内のスタイル */
.contents {
text-align: center;
}
.item {
padding-top: 100px;
}
/* フッター */
footer {
background-color: #4b6cb7;
padding: 1em;
margin-top: 100px;
}
footer p {
font-size: .8em;
color: #fff;
max-width: 800px;
padding: 0;
text-align: center;
margin: 0 auto;
font-weight: bold;
}
手順③:JavaScriptを作成
最後に、JavaScriptファイルに下記コードをコピペします。
$(function(){
$(window).on('scroll', function() {
$('#header').toggleClass('fixed', $(this).scrollTop() > 300);
});
});
300px分スクロールしたら、先ほどCSSファイルで作成したfixed
クラスを付与してヘッダーを固定させるという処理を行っています。
スクロール後に上からヘッダーを出現させる
続いて、スクロール後に上から出てくる固定ヘッダーの作成方法を解説します。
最初は普通に表示しておき、スクロールすると上から出現するという仕組みです。
See the Pen 固定ヘッダー 上から出現(ショーゴログ) by taeko k (@taeko-k) on CodePen.
手順①:HTMLファイルを作成
まずは、HTMLを作成しましょう。下記コードをHTMLファイルにコピペしてください。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<!-- 自作のCSSファイルの読み込み -->
<link rel="stylesheet" type="text/css" href="style.css">
<title>固定ヘッダーの説明</title>
</head>
<body>
<!-- ヘッダーメニュー -->
<header class="header">
<h1 class="title">Pittolog</h1>
</header>
<main>
<div class="content">
<p>テキストテキストテキストテキストテキストテキスト</p>
<p>テキストテキストテキストテキストテキストテキスト</p>
<p>テキストテキストテキストテキストテキストテキスト</p>
<p>テキストテキストテキストテキストテキストテキスト</p>
</div>
<div class="content">
<p>テキストテキストテキストテキストテキストテキスト</p>
<p>テキストテキストテキストテキストテキストテキスト</p>
<p>テキストテキストテキストテキストテキストテキスト</p>
<p>テキストテキストテキストテキストテキストテキスト</p>
</div>
<div class="content">
<p>テキストテキストテキストテキストテキストテキスト</p>
<p>テキストテキストテキストテキストテキストテキスト</p>
<p>テキストテキストテキストテキストテキストテキスト</p>
<p>テキストテキストテキストテキストテキストテキスト</p>
</div>
<div class="content">
<p>テキストテキストテキストテキストテキストテキスト</p>
<p>テキストテキストテキストテキストテキストテキスト</p>
<p>テキストテキストテキストテキストテキストテキスト</p>
<p>テキストテキストテキストテキストテキストテキスト</p>
</div>
</main>
<!-- フッター -->
<footer>
<p>© 2023 pittolog</p>
</footer>
<!-- body直前でjQueryと自作のJSファイルの読み込み -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<!-- 自作のJSファイル -->
<script src="main.js"></script>
</body>
</html>
手順②:CSSを作成
続いて、CSSファイルを作成します。下記コードをコピーしてください。
body {
margin:0;
}
.header {
height: 50px;
padding: 20px;
background-color: #FFE6CE;
}
.title {
margin: 0;
}
.header-fixed {
position: fixed;
top: 0;
left: 0;
right: 0;
opacity: 1;
visibility: visible;
animation: slide 0.5s ease-in-out;
}
.content {
text-align: center;
margin-top: 100px;
}
@keyframes slide {
0% {
transform: translateY(-100%);
}
100% {
transform: translateY(0%);
}
}
footer {
background-color: #FFE6CE;
padding: 1em;
margin-top: 200px;
}
footer p {
font-size: .8em;
color: #333;
max-width: 800px;
padding: 0;
text-align: center;
margin: 0 auto;
font-weight: bold;
}
CSSのポイントは下記のとおりです。
header-fixed
のクラスを作成しfixed
で固定する- animationで0.5秒後にヘッダーを下にスライドさせる
header-fixed
のクラスを新たに作成し、そのなかにfixed
を設置します。このクラスは、後ほど解説するJavaScritp内で処理を行う際に使用します。
また、0.5秒後にヘッダーが下にスライドするように、animationを設定しています。今回は「slide」という名前を付けて、header-fixed
内に設置しました。
手順③:JavaScriptを作成
window.addEventListener('scroll', function() {
const header = document.querySelector('.header');
// ここでヘッダーの高さを取得する
const headerHeight = header.offsetHeight;
const scrollY = window.pageYOffset;
if (scrollY >= 100) {
// 100pxスクロール後にheader-fixedを付与する
header.classList.add('header-fixed');
// ヘッダーと同じ高さ分の余白をbodyに設置
document.body.style.marginTop = headerHeight + 'px';
} else {
header.classList.remove('header-fixed');
// 先ほど入れた余白をリセットする
document.body.style.marginTop = '0';
}
});
JavaScriptのポイントは下記のとおりです。
- 100pxスクロール後に
header-fixed
を付与して固定する - ヘッダーと同じ高さ分の余白をbodyに設置する
100pxスクロールしたあとに、CSSで作成したheader-fixed
を付与して固定するよう設定します。
また、bodyにヘッダーと同じ高さ分の余白を入れています。100pxスクロールして元のヘッダーが消えた際に、下のコンテンツが動いてしまわないようにするための対策です。
スクロール後にゆっくり色を変えて出現させる
スクロールすると、背景の色をゆっくりと変化しながら出てくる固定ヘッダーの作成方法を解説します。
完成形は下記のとおりです。
See the Pen Untitled by taeko k (@taeko-k) on CodePen.
作成手順を解説していきます。
手順①:HTMLファイルを作成
まずは、HTMLを作成しましょう。下記コードをHTMLファイルにコピペしてください。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<!-- 自作のCSSファイルの読み込み -->
<link rel="stylesheet" type="text/css" href="style.css">
<title>固定ヘッダーの説明</title>
</head>
<body>
<!-- ヘッダー -->
<header id="header">
<ul class="menu">
<li>
<a href="#about">
<p>About</p>
</a>
</li>
<li>
<a href="#news">
<p>News</p>
</a>
</li>
<li>
<a href="#blog">
<p>Blog</p>
</a>
</li>
<li>
<a href="#contact">
<p>Contact</p>
</a>
</li>
</ul>
</header>
<div class="contents">
<!-- aboutセクション -->
<section id="about" class="item">
<div class="wrapper">
<h1>About</h1>
<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</br>
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</br>
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
</p>
</div>
</section>
<!-- newsセクション -->
<section id="news" class="item">
<div class="wrapper">
<h1>News</h1>
<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</br>
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</br>
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
</p>
</div>
</section>
<!-- blogセクション -->
<section id="blog" class="item">
<div class="wrapper">
<h1>Blog</h1>
<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</br>
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</br>
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
</p>
</div>
</section>
<!-- contactセクション -->
<section id="contact" class="item">
<div class="wrapper">
<h1>Contact</h1>
<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</br>
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</br>
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
</p>
</div>
</section>
</div>
<!-- フッター -->
<footer>
<p>© 2023 pittolog</p>
</footer>
<!-- body直前でjQueryと自作のJSファイルの読み込み -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<!-- 自作のJSファイル -->
<script src="main.js"></script>
</body>
</html>
手順②:CSSファイルを作成
続いて、CSSファイルを作成します。下記コードをコピペしてください。
body {
margin:0;
}
/*ヘッダー*/
#header {
background-color: #4b6cb7;
z-index: 999;
width: 100%;
padding:10px;
display: flex;
box-sizing: border-box;
}
#header .menu{
display: flex;
margin:0;
}
#header li{
margin-right: 38px;
position: relative;
list-style-type:none;
}
#header li a{
color: #ffffff;
font-weight:bold;
text-decoration:none;
}
/* 固定ヘッダー */
#header.fixed {
position: fixed; /*fixedで固定する*/
top: 0;
left:0;
background-color:#DCDCDC;
transition: 1.0s; /* ← ゆっくりと変化させる*/
}
/* スクロール後にスタイル変更する箇所 */
#header.fixed li a {
color: #191919;
}
/* コンテンツ内のスタイル */
.contents {
text-align:center;
}
.item {
padding-top:100px;
}
/* フッター */
footer {
background-color: #4b6cb7;
padding:1em;
margin-top:100px;
}
footer p {
font-size: .8em;
color: #fff;
max-width: 800px;
padding: 0;
text-align:center;
margin:0 auto;
font-weight:bold;
}
CSSのポイントは下記のとおりです。
#header.fixed
クラスに異なる色を設定#header.fixed
クラスにtransitionを設定してゆっくり変化させる
#header.fixed
でヘッダーを固定すると同時に、もとの#header
クラスと異なる色を設定します。そしてtransitionで1.0秒かけてゆっくりと色を変化させる仕組みです。
手順③:JavaScriptを作成
JavaScriptファイルに下記コードをコピペします。
// スクロール後のヘッダー出現設定
$(function(){
$(window).on('scroll', function() {
$('#header').toggleClass('fixed', $(this).scrollTop() > 200);
});
});
200px分スクロールしたら、fixed
クラスを付与してヘッダーを固定させるという処理を行っています。
スクロールするとヘッダーの背景色が変わる
スクロールすると、ヘッダーの背景色がゆっくり変化する固定ヘッダーの実装方法です。
完成形は下記のようになります。
See the Pen Untitled by taeko k (@taeko-k) on CodePen.
作成手順を解説していきます。
手順①:HTMLファイルを作成
まずは、HTMLを作成しましょう。下記コードをHTMLファイルにコピペしてください。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<!-- 自作のCSSファイルの読み込み -->
<link rel="stylesheet" type="text/css" href="style.css">
<title>固定ヘッダーの説明</title>
</head>
<body>
<!-- ヘッダー -->
<header id="header">
<ul class="menu">
<li><a href="#about">About</a></li>
<li><a href="#news">News</a></li>
<li><a href="#blog">Blog</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div>
</header>
<div class="contents">
<!-- aboutセクション -->
<section id="about" class="item">
<div class="wrapper">
<h1>About</h1>
<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</br>
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</br>
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
</p>
</div>
</section>
<!-- newsセクション -->
<section id="news" class="item">
<div class="wrapper">
<h1>News</h1>
<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</br>
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</br>
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
</p>
</div>
</section>
<!-- blogセクション -->
<section id="blog" class="item">
<div class="wrapper">
<h1>Blog</h1>
<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</br>
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</br>
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
</p>
</div>
</section>
<!-- contactセクション -->
<section id="contact" class="item">
<div class="wrapper">
<h1>Contact</h1>
<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</br>
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</br>
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
</p>
</div>
</section>
</div>
<!-- フッター -->
<footer>
<p>© 2023 pittolog</p>
</footer>
<!-- body直前でjQueryと自作のJSファイルの読み込み -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<!-- 自作のJSファイル -->
<script src="main.js"></script>
</body>
</html>
手順②:CSSファイルを作成
続いて、CSSファイルを作成します。下記コードをコピペしてください。
body {
margin: 0;
}
/* ヘッダーのスタイル */
#header {
position: fixed;
width: 100%;
background-color: #DCDCDC;
}
#header ul {
display: flex;
padding-left: 120px;
}
#header ul li {
padding-right: 30px;
list-style-type: none;
}
#header a {
color: #333333;
text-decoration: none;
font-weight:bold;
}
/* 固定ヘッダーのスタイル */
#header.fixed {
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color: #333333;
transition: 0.8s;
}
/* 固定ヘッダーのテキストの色 */
#header.fixed a {
color: #ffffff;
}
/* コンテンツ内のスタイル*/
.contents {
text-align: center;
}
.item {
padding-top: 100px;
}
/* フッター */
footer {
background-color: #333333;
padding: 1em;
margin-top: 100px;
}
footer p {
font-size: .8em;
color: #fff;
max-width: 800px;
padding: 0;
text-align: center;
margin: 0 auto;
font-weight:bold;
}
手順③:JavaScriptを作成
JavaScriptファイルに下記コードをコピペします。
$(function(){
$(window).on('scroll', function() {
$('#header').toggleClass('fixed', $(this).scrollTop() > 10);
});
});
10px分スクロールしたら、ヘッダーの背景色を変化させる処理をしています。
フッターを固定させる方法
最後に、CSSだけでフッターをページの下部に固定させる方法を解説します。
完成形は下記のとおりです。
See the Pen フッター固定 by taeko k (@taeko-k) on CodePen.
スクロールしても、フッターを常に画面の下部に固定させることができます。
以下で作成手順を解説していきます。
手順①:CSSファイルを作成
まずはCSSファイルを作成しましょう。
CSS作成時のポイントは下記のとおりです。
- footerを
position:fixed
で固定し、bottom:0
でページの下部に設置する - bodyに
padding-bottom
を設定し、メインコンテンツがfooterに隠れないようにする。
上記のポイントをもとに作成したコードが下記です。
body {
padding-bottom: 60px;
}
footer {
position: fixed;
bottom: 0;
}
上記のコードを含めたCSS全体のコードは下記をご参照ください。
body {
margin: 0;
padding-top: 60px;
padding-bottom: 60px; /* フッターの下に隠れないよう高さを確保 */
}
/* ヘッダー */
header {
position: fixed;
width: 100%;
height: 60px;
background: #CCC;
padding: 20px 60px;
box-sizing: border-box;
top: 0;
left: 0;
display: flex;
align-items: center;
display: flex;
justify-content:space-between;
}
header .nav .menu {
display: flex;
}
header .nav .menu li {
list-style: none;
margin-left: 40px;
}
header .nav .menu li a{
color: #B78D4A;
font-weight:bold;
text-decoration: none;
}
main {
text-align:center;
}
h2 {
color: #B78D4A;
text-decoration: none;
padding-top: 100px;
}
/* フッター */
footer {
position: fixed;/* ←fixedで固定 */
bottom: 0;/* ←ページ下部に設置 */
width:100%;
background: #CCC;
padding:1em;
}
footer p {
font-size: .8em;
color: #fff;
padding: 0;
text-align:center;
margin:0 auto;
font-weight:bold;
}
手順①:HTMLファイルを作成
続いて、下記コードをHTMLファイルにコピペしてください。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<!-- 自作のCSSファイルの読み込み -->
<link rel="stylesheet" type="text/css" href="style.css">
<title>固定ヘッダーの説明</title>
</head>
<body>
<!-- ヘッダー -->
<header>
<h1>Pittolog</h1>
<nav class="nav">
<ul class="menu">
<li><a href="#about">About</a></li>
<li><a href="#news">News</a></li>
<li><a href="#blog">Blog</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>
<main>
<!-- aboutセクション -->
<section id="about">
<div class="wrapper">
<h2>About</h2>
<p>テキストテキストテキストテキストテキストテキストテキストテキスト<br>
テキストテキストテキストテキストテキストテキストテキストテキスト</p>
</div>
</section>
<!-- newsセクション -->
<section id="news">
<div class="wrapper">
<h2>News</h2>
<p>テキストテキストテキストテキストテキストテキストテキストテキスト<br>
テキストテキストテキストテキストテキストテキストテキストテキスト</p>
</div>
</section>
<!-- blogセクション -->
<section id="blog">
<div class="wrapper">
<h2>Blog</h2>
<p>テキストテキストテキストテキストテキストテキストテキストテキスト<br>
テキストテキストテキストテキストテキストテキストテキストテキスト</p>
</div>
</section>
<!-- contactセクション -->
<section id="contact">
<div class="wrapper">
<h2>Contact</h2>
<p>テキストテキストテキストテキストテキストテキストテキストテキスト<br>
テキストテキストテキストテキストテキストテキストテキストテキスト</p>
</div>
</section>
</main>
<!-- フッター -->
<footer>
<p>© 2023 pittolog</p>
</footer>
<!-- body直前でjQueryと自作のJSファイルの読み込み -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<!-- 自作のJSファイル -->
<script src="main.js"></script>
</body>
</html>
固定ヘッダーが重なる場合はposition: stickyや余白で対処する
![男性が座ってパソコンを触っている](https://taekok.com/wp-content/uploads/2023/08/undraw_Freelancer_re_irh4.png)
固定ヘッダーを実装した際に、下のコンテンツが隠れてしまう場合の対処法を解説します。
下記のように、コンテンツの1行目がヘッダーと重なって見えなくなってしまう場合です。
See the Pen ヘッダーが重なる例 by taeko k (@taeko-k) on CodePen.
このような場合は、下記2つの解決策があります。
position: sticky
で実装する- ヘッダーの幅と同じサイズのスペースを入れる
1つずつ解説するので、お困りの方は参考にしてみてください。
position: stickyで実装してみる
下のコンテンツが隠れてしまった場合は、position: fixed
で固定するのではなく、position: sticky
で実装し直してみましょう。
下記のように、ヘッダーが重なることなくコンテンツの1行目を表示させることができます。
See the Pen ヘッダーが重なる例 by taeko k (@taeko-k) on CodePen.
CSSの#headerに、下記の要素を適用させることで実現できます。
#header {
position: sticky;
z-index: 999;
top: 0;
}
ポイントは下記のとおりです。
- #headerを
position: sticky
で固定 z-index: 999
でヘッダーを全面に表示させるtop: 0
で画面の最上部に配置させる
fixed
もsticky
も、ともに要素の位置を固定する際に使用しますが、それぞれ意味合いが少し異なります。
position: fixed
は、ウィンドウ(画面)を基準として要素の位置を固定します。ほかの要素の位置に関係なく配置されるため、ヘッダーが重なるという現象が起こってしまうのです。
一方、position: sticky
は親要素を基準として要素の位置を固定します。そのため、ほかの要素と重なることなくヘッダーを表示させることができるのです。
HTML・CSSの全体のコードは下記をご参照ください。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<!-- 自作のCSSファイルの読み込み -->
<link rel="stylesheet" type="text/css" href="style.css">
<title>固定ヘッダーの説明</title>
</head>
<body>
<!-- ヘッダー -->
<header id="header">
<h1>Pittolog</h1>
</header>
<main>
<div class="contents">
<p>1行目のテキスト</p>
<p>2行目のテキスト</p>
<p>3行目のテキスト</p>
<p>4行目のテキスト</p>
<p>5行目のテキスト</p>
<p>6行目のテキスト</p>
<p>7行目のテキスト</p>
<p>8行目のテキスト</p>
</div>
</main>
<!-- フッター -->
<footer>
<p>© 2023 pittolog</p>
</footer>
<!-- body直前でjQueryと自作のJSファイルの読み込み -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<!-- 自作のJSファイル -->
<script src="main.js"></script>
</body>
</html>
#header {
position: sticky;/* ←fixedからstickyに変更 */
top: 0;
width: 100%;
padding: 0.5rem 1rem;
background: #ffffff;
opacity: 0.8;
display: flex;
align-items: center;
z-index: 999;
}
h1 {
margin: 0;
}
.contents {
background-color: #333333;
color: #ffffff;
padding: 10px;
height: 100vh;
}
.flex {
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
}
/* フッター */
footer {
background-color: #333333;
padding: 1em;
margin-top: 100px;
}
footer p {
font-size: .8em;
color: #fff;
max-width: 800px;
padding: 0;
text-align: center;
margin: 0 auto;
font-weight: bold;
}
ヘッダーの幅と同じサイズのスペースを入れる
ヘッダー下のコンテンツに、ヘッダーと同じ高さ分のスペースを入れることで重なりを解決できます。
position: fixed
で固定したまま実装可能です。
See the Pen 空白で重なりを解消する(固定ヘッダー) by taeko k (@taeko-k) on CodePen.
#headerとその下にあるコンテンツに、下記の要素を適用させることで実現できます。
/* ヘッダー */
#header {
position: fixed;
top: 0;
z-index: 999;
width: 100%;
height:60px;
}
/* ヘッダーの下にあるコンテンツ */
main {
margin-top:60px;
}
ポイントは2点です。
- #headerの高さを指定する
- ヘッダーの下にある要素に、#headerと同じ高さ分のmarginを指定する
#header
の高さを60pxに指定し、それと同じ高さ分のmargin:60px;
を下のコンテンツにも指定します。
そうすることでヘッダーを入れる分のスペースができ、position: fixed;
のままでも重なりを解消することができます。
HTML・CSSの全体のコードは下記をご参照ください。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<!-- 自作のCSSファイルの読み込み -->
<link rel="stylesheet" type="text/css" href="style.css">
<title>固定ヘッダーの説明</title>
</head>
<body>
<!-- ヘッダー -->
<header id="header">
<h1>Pittolog</h1>
</header>
<main>
<div class="contents">
<p>1行目のテキスト</p>
<p>2行目のテキスト</p>
<p>3行目のテキスト</p>
<p>4行目のテキスト</p>
<p>5行目のテキスト</p>
<p>6行目のテキスト</p>
<p>7行目のテキスト</p>
<p>8行目のテキスト</p>
</div>
</main>
<!-- フッター -->
<footer>
<p>© 2023 pittolog</p>
</footer>
<!-- body直前でjQueryと自作のJSファイルの読み込み -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<!-- 自作のJSファイル -->
<script src="main.js"></script>
</body>
</html>
#header {
position: fixed;
top: 0;
width: 100%;
height: 60px;
padding: 0 1rem;
background: #ffffff;
opacity: 0.8;
display: flex;
align-items: center;
z-index: 999;
}
h1 {
margin: 0;
}
main {
margin-top: 60px;
}
.contents {
background-color: #333333;
color: #ffffff;
padding: 10px;
height: 100vh;
}
.flex {
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
}
/* フッター */
footer {
background-color: #333333;
padding: 1em;
margin-top: 100px;
}
footer p {
font-size: .8em;
color: #fff;
max-width: 800px;
padding: 0;
text-align: center;
margin: 0 auto;
font-weight: bold;
}
ヘッダーが固定できない場合は親要素のtransformを除外する
![](https://taekok.com/wp-content/uploads/2023/08/undraw_Questions_re_1fy7-1-1024x713.png)
ヘッダーが固定できないときに陥りやすいパターンと、その解決策を紹介します。
<body>などの親要素にtransformを指定している場合、ヘッダーが固定できない場合があります。下記がその例です。
See the Pen transformが原因でヘッダーを固定できない例 by taeko k (@taeko-k) on CodePen.
親要素にtransform
を指定すると、position:fixed;
を指定した子要素が、親要素からの相対位置になってしまうのが原因です。
解決策としては下記の2点があります。
- 親要素からtransformを外す
position: fixed
をposition: sticky
に変更する
1つ目の方法は、シンプルに親要素からtransformを外してしまうことです。
「transformは絶対に外せない」という方は、fixed
をsticky
に変更しましょう。そうすると、transformは使用したままで、ヘッダーを固定させることができます。
下記がその例です。
See the Pen transformを外した例 by taeko k (@taeko-k) on CodePen.
HTML・CSSの全体のコードは下記をご参照ください。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<!-- 自作のCSSファイルの読み込み -->
<link rel="stylesheet" type="text/css" href="style.css">
<title>固定ヘッダーの説明</title>
</head>
<body>
<!-- ヘッダー -->
<header id="header">
<h1>Pittolog</h1>
</header>
<main>
<div class="contents">
<p>1行目のテキスト</p>
<p>2行目のテキスト</p>
<p>3行目のテキスト</p>
<p>4行目のテキスト</p>
<p>5行目のテキスト</p>
<p>6行目のテキスト</p>
<p>7行目のテキスト</p>
<p>8行目のテキスト</p>
</div>
</main>
<!-- フッター -->
<footer>
<p>© 2023 pittolog</p>
</footer>
<!-- body直前でjQueryと自作のJSファイルの読み込み -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<!-- 自作のJSファイル -->
<script src="main.js"></script>
</body>
</html>
body {
transform: translate3d(0, 0, 0)
}
#header {
position: sticky;
top: 0;
width: 100%;
height: 60px;
padding: 0 1rem;
background: #ffffff;
opacity: 0.8;
display: flex;
align-items: center;
z-index: 999;
}
h1 {
margin: 0;
}
.contents {
background-color: #333333;
color: #ffffff;
padding: 10px;
height: 100vh;
}
.flex {
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
}
/* フッター */
footer {
background-color: #333333;
padding: 1em;
margin-top: 100px;
}
footer p {
font-size: .8em;
color: #fff;
max-width: 800px;
padding: 0;
text-align: center;
margin: 0 auto;
font-weight: bold;
}
WordPress学習に役立つおすすめの参考書
![自然のなかで仕事をする男の人](https://taekok.com/wp-content/uploads/2023/09/undraw_Working_from_anywhere_re_9obt.png)
ここからは、WordPress学習におすすめの参考書を3選ご紹介します。
テキスト名 | 値段 | おすすめポイント | 発売日 | ページ数 |
---|---|---|---|---|
WordPressデザインレシピ集 | 3,058円 | WordPressの機能が230個も掲載されている | 2019/8/24 | 672ページ |
WordPress 仕事の現場でサッと使える! デザイン教科書 | 3,300円 | 仕事で必要なWordPressの知識が身に付く | 2020/2/17 | 384ページ |
WordPressオリジナルテーマ制作入門 | 2,948円 | オリジナルテーマの自作方法を丁寧に解説 | 2022/1/13 | 416ページ |
WordPressのさまざまな機能についてもっと理解を深めたい方は、ぜひ参考にしてください。
WordPressデザインレシピ集
WordPressデザインレシピ集のおすすめポイント
- WordPressの機能が230個も掲載されている
- 辞書のようにサッと使える
WordPressデザインレシピ集は、「あのカスタマイズってどうやるんだっけ?」をサッと解決できる辞書のような解説書です。
テーマ作成・投稿ページ・固定ページ・カスタム投稿タイプ・カスタムフィールドなど、WordPressの機能が230個も掲載されています。実現したいテクニックが目的別に整理されているので、すぐに引き出せるのが魅力です。
日ごろからWordPressを使用している人も、「WordPressってこんな機能もあったんだ!」と新たな発見につながるでしょう。
WordPress 仕事の現場でサッと使える! デザイン教科書
WordPress 仕事の現場でサッと使える! デザイン教科書のおすすめポイント
- 仕事で必要なWordPressの知識が身に付く
- オリジナルテーマを使用したWebサイト構築が学べる
WordPress 仕事の現場でサッと使える! デザイン教科書は、仕事で必須のWordPressの知識が身に付く解説書です。
テーマの仕組みや構造やが丁寧に解説されているほか、プラグインを利用して効率的にWordPressを運用する方法や、サイトの高速化やセキュリティ強化についても解説されています。
オリジナルテーマを使用したWebサイト構築が学べるため、「WordPressをもっと使いこなせるようになりたい」という方にぴったりの1冊です。
WordPressオリジナルテーマ制作入門
WordPressオリジナルテーマ制作入門のおすすめポイント
- オリジナルテーマの自作方法を丁寧に解説
- テーマをブロックエディターに対応させる方法を学べる
WordPressオリジナルテーマ制作入門は、オリジナルテーマの自作方法を基礎から学べる解説書です。
テーマ作成に必須の基礎知識から、テーマをブロックエディターに対応させる方法まで一から丁寧に解説されています。
これ1冊でしっかりと学べるため、「WordPressの案件でオリジナルテーマを作りたい」という方は必読です。
ヘッダーを固定させて見やすいサイトをつくろう
![男女がコーヒーを持っている画像](https://taekok.com/wp-content/uploads/2023/08/undraw_Coffee_re_x35h.png)
本記事では固定ヘッダーの作成方法について解説しました。
ヘッダーを固定させることで見たいページに遷移しやすくなり、ユーザーの満足度を高めることができます。
そうすることで、リンクのクリック数や収益の向上を目指せるでしょう。
この記事を参考にしながら、ヘッダーを固定させる方法をぜひ習得してみてください。
最後までお読みいただき、ありがとうございました。