HTML/CSS
css
html

HTML/CSSでWebページのヘッダーを固定する方法を解説

2021/05/05

( 更新日：2022/04/19 )

Webページを見ているとヘッダーが固定されているサイトが多いと思います。ヘッダーが固定されていると行きたいページにすぐに行けたり、興味を持ったところに行く際にいちいちページを上にもっていく必要がないため、効率的です。

ヘッダーを固定するにはHTML/CSSで固定するためのコードを書く必要があります。本記事では、HTML/CSSでWebページのヘッダーを固定する方法を解説します。コード自体はシンプルなので使えるようになることをおすすめします。

HTMLでヘッダーを固定する方法

CSSでposition:fixed;を使う

ヘッダーを固定する方法はCSSで「position:fixed」を使います。HTMLでヘッダーを使う場合は<header>で固定すると思うので、下記のように書きます。

header {
  position:fixed;
  z-index:100;
}

もし、ヘッダーの一部のみを固定したい場合は、headerの部分を固定したい要素（セレクタ）にすれば、固定できます。ヘッダーを固定した場合、スライドしていくと文字が重なることがあるため、z-indexを用いて一番上にヘッダーが来るようにすることが大切です。

z-indexは数字が大きいほど手前にくるので、大きい数字であれば100でなくても構いません。

レスポンシブ対応にする

ヘッダーを固定する際には、レスポンシブ対応にすることをおすすめします。なぜなら、ヘッダーを固定して、ディスプレイのサイズが変わるとレイアウト崩れが起こりやすいからです。

ディベロッパーツールを使って、スライドさせながら各サイズでのレイアウト崩れが起こっていないことをしっかり確認することが大切です。固定できたことに満足せずに、レスポンシブ対応もしっかり検討することをおすすめします。

HTMLでヘッダーを固定するメリット

常にサイトの全体像が分かる

ヘッダーを固定すれば、どれだけ下にスクロールしてもサイトの全体像が分かります。ランディングページのような縦に長いページだと途中で最初の方のことをわすれてしまい自分が何を見ていたのかを忘れてしまうことがあると思います。

サイトを見ようとした目的を忘れてしまうともういいかと思ってページを離れてしまう可能性が高いです。特に、ユーザーがページを読み進めようと思う理由としてはヘッダー部分などのページ上部に惹かれることがあるからです。

そこでページの全体像を固定して常に表示しておくことで、固定された部分を見ることで最初の方に書かれていたことを思い出せます。

別ページ行きたいときに上まで戻る手間がない

メニューバーを固定すればページの下の方から別のページに行きたいと思っても、戻ることなく飛ぶことができます。ページを読み進めて他のコンテンツに興味がでたり、情報をもっと欲しいと思えば、メニューから他のページに飛びたいと思います。

もし、メニューバーが固定されておらず、一番上まで戻らければいけない場合、面倒だからやめておこうと思われる可能性があります。対してメニューバーが固定されており、すぐに別のページにいけるとしたら、ちょっと覗いてみようという気になると思います。

ヘッダーを固定する場合はユーザーにとって面倒な手間をさせないことを念頭において考えることが重要です。

HTMLでヘッダーを固定するデメリット

スマホなど画面が狭いとページを占有する

ヘッダーを固定するとページのどこかに固定されたものが表示された状態になります。そのため、画面サイズが小さいスマホでは少し指がずれただけで固定部分に指が触れてリンク先に行く可能性があります。一度ならまだしも何度も続けば嫌になって、他のサイトに行くことになったら、ヘッダーを固定する意味をなくします。

そのため、レスポンシブ対応の際にはヘッダーの固定部分を狭くしたり、ハンバーガーメニューを使うことをおすすめします。特に、ハンバーガーメニューはスマホでは場所も取らずに、メニューをすぐに表示できます。ハンバーガーメニューの作り方は下の記事を参考にしてみてください。

誰でも簡単に始められる！jQueryの使い方を解説【コード例】

サンプルコード

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>header-fixed</title>
    <link rel="stylesheet" href="./style.css">
  </head>
  <body>
    <header>
      <div class="header-logo">
        <h1>Logo</h1>
      </div>
      <div class="header-list">
        <ul>
          <li>HOME</li>
          <li>Canpany</li>
          <li>Works</li>
          <li>Contact Us</li>
        </ul>
      </div>
    </header>
    <div class="container">
      <main>
        <h2>ここにテキストが入ります</h2>
        <p>
          説明文説明文説明文説明文説明文説明文説明文説明文説明文説明文説明文説明文説明文説明文説明文説明文説明文説明文説明文説明文説明文説明文説明文説明文
        </p>
      </main>
    </div>
  </body>
</html>

* {
  padding: 0;
  margin: 0;
}

body {
  width: 1080px;
  margin: 0 auto;
}

.container {
  width: 100%;
}

header {
  position: fixed;
  z-index: 100;
  height: 150px;
  background-color: white;
  width: 1080px;
  padding-top: 50px;
}

.header-list {
  height: 100px;
}

ul {
  display: flex;
  padding: 0;
}

li {
  text-align: center;
  line-height: 100px;
  list-style: none;
  width: 25%;
}

main {
  padding-top: 300px;
  height: 1000px;
}