CSS Web制作

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>

作成する際のポイントは下記のとおりです。

  1. </head>タグの直前で「自作のCSSファイル」を読み込む
  2. </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パターンとフッターの固定方法を紹介

男性が大きいmac画面を見ている

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

今回解説する実装例は下記の5つです。

  1. スクロール後にヘッダーを固定させる方法
  2. スクロール後に色を変えながらヘッダーを出現させる方法
  3. スクロール後に上からヘッダーを出現させる方法
  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つの解決策があります。

  1. position: stickyで実装する
  2. ヘッダーの幅と同じサイズのスペースを入れる

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点があります。

  1. 親要素からtransformを外す
  2. 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/24672ページ
WordPress 仕事の現場でサッと使える! デザイン教科書

詳しくはコチラ

3,300円仕事で必要なWordPressの知識が身に付く2020/2/17384ページ
WordPressオリジナルテーマ制作入門

詳しくはコチラ

2,948円オリジナルテーマの自作方法を丁寧に解説2022/1/13416ページ

WordPressのさまざまな機能についてもっと理解を深めたい方は、ぜひ参考にしてください。

WordPressデザインレシピ集

WordPressデザインレシピ集のおすすめポイント

  • WordPressの機能が230個も掲載されている
  • 辞書のようにサッと使える

WordPressデザインレシピ集は、「あのカスタマイズってどうやるんだっけ？」をサッと解決できる辞書のような解説書です。

テーマ作成・投稿ページ・固定ページ・カスタム投稿タイプ・カスタムフィールドなど、WordPressの機能が230個も掲載されています。実現したいテクニックが目的別に整理されているので、すぐに引き出せるのが魅力です。

日ごろからWordPressを使用している人も、「WordPressってこんな機能もあったんだ！」と新たな発見につながるでしょう。

Amazonで購入

楽天で購入

WordPress 仕事の現場でサッと使える! デザイン教科書

WordPress 仕事の現場でサッと使える! デザイン教科書のおすすめポイント

  • 仕事で必要なWordPressの知識が身に付く
  • オリジナルテーマを使用したWebサイト構築が学べる

WordPress 仕事の現場でサッと使える！ デザイン教科書は、仕事で必須のWordPressの知識が身に付く解説書です。

テーマの仕組みや構造やが丁寧に解説されているほか、プラグインを利用して効率的にWordPressを運用する方法や、サイトの高速化やセキュリティ強化についても解説されています。

オリジナルテーマを使用したWebサイト構築が学べるため、「WordPressをもっと使いこなせるようになりたい」という方にぴったりの1冊です。

Amazonで購入

楽天で購入

WordPressオリジナルテーマ制作入門

WordPressオリジナルテーマ制作入門のおすすめポイント

  • オリジナルテーマの自作方法を丁寧に解説
  • テーマをブロックエディターに対応させる方法を学べる

WordPressオリジナルテーマ制作入門は、オリジナルテーマの自作方法を基礎から学べる解説書です。

テーマ作成に必須の基礎知識から、テーマをブロックエディターに対応させる方法まで一から丁寧に解説されています。

これ1冊でしっかりと学べるため、「WordPressの案件でオリジナルテーマを作りたい」という方は必読です。

Amazonで購入

楽天で購入

ヘッダーを固定させて見やすいサイトをつくろう

男女がコーヒーを持っている画像

本記事では固定ヘッダーの作成方法について解説しました。

ヘッダーを固定させることで見たいページに遷移しやすくなり、ユーザーの満足度を高めることができます。

そうすることで、リンクのクリック数や収益の向上を目指せるでしょう。

この記事を参考にしながら、ヘッダーを固定させる方法をぜひ習得してみてください。

最後までお読みいただき、ありがとうございました。

  • この記事を書いた人

ぴっと

フリーランスWeb制作者。主にプログラミング・WordPress・コーディングなどの知識について発信しています。初心者でも分かりやすく、かつ楽にコーディングができるようお手伝いができればと思っています。

-CSS, Web制作