CSSでヘッダーを固定したままスクロールする方法！重なるときや固定できないときの対処法も解説

悩む人

CSSでヘッダーを固定させたままスクロールする方法は？

悩む人

ヘッダーを固定できないときや重なるときの対処方法は？

このようなお悩みをお持ちの方は多いのではないでしょうか？

ヘッダーを固定させたままスクロールする方法は、CSSでposition:fixedを使用するのが簡単でおすすめです。

固定ヘッダーが重なるときはposition: stickyで実装したり、ヘッダーと同じ幅の余白を入れたりするとよいでしょう。

本記事では、CSSを用いた固定ヘッダーの実装例について紹介しています。

JavaScritptを使った実装方法やフッターの固定方法も解説するので、サイトのユーザビリティを高めたい人は参考にしてください。

本記事でわかること

1，固定ヘッダーとは

2，ヘッダーをサイト上部に固定させる方法

3，固定ヘッダーの実装例4パターンを紹介

4，固定ヘッダーが重なる場合の対処法

5，ヘッダーが固定できない場合の対処法

6, WordPress学習に役立つおすすめの参考書

固定ヘッダーはユーザーの閲覧数アップやユーザビリティの改善を促す

固定ヘッダーは、スクロールしても画面外にヘッダーが消えることなく、ページ上部に固定させたまま表示することができます。

下記は固定ヘッダーを実装した例です。画面をスクロールしてみて、ヘッダーが常に上部に表示されていることを確認してみてください。

See the Pen 固定ヘッダー（CSSのみ） by taeko k (@taeko-k) on CodePen.

ヘッダーを固定するメリットは下記のとおりです。

ユーザーの閲覧数アップにつながる
ユーザビリティを高めることができる

ヘッダーメニューが上部に表示されていることでほかのページに飛びやすくなるため、閲覧数を上げることができます。

サイト画面内に他ページのリンクがなければ、ユーザーはそのままサイトを離脱してしまうかもしれません。

しかしヘッダーメニューを常に確認できる状態にしておけば、ほかのページも閲覧してくれる可能性が高まります。

また、ヘッダーを固定することでサイトの見やすさがアップするため、ユーザビリティを高めることができるでしょう。

その結果、サイト内に設置したリンクのクリック数がアップし、収益の向上にも期待ができるでしょう。

ヘッダーを固定して表示させる方法はCSS・JavaScriptのどちらも可能

この章では、ヘッダーをサイト上部に固定する方法を解説します。

また固定ヘッダーは、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最新のスクリプトは、下記公式サイトで確認できるのでチェックしてみてください。

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パターンとフッターの固定方法を紹介

この章では、よく使われる固定ヘッダーの実装例と、フッターを固定させる方法を紹介します。

今回解説する実装例は下記の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や余白で対処する

固定ヘッダーを実装した際に、下のコンテンツが隠れてしまう場合の対処法を解説します。

下記のように、コンテンツの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を除外する

ヘッダーが固定できないときに陥りやすいパターンと、その解決策を紹介します。

<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学習に役立つおすすめの参考書

ここからは、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ページ