CSSでヘッダー(ナビゲーション)を上部に固定させる方法

今回はCSSを使ってスクロールしても常に上部にヘッダー（ナビゲーション）を表示させる方法をご紹介します。

まずはデモページを確認します。

重要な動線を常に画面上部に固定で表示させておくことで、サイト内回遊率を高める効果があったり、ユーザーがわざわざ上部まで戻らなくてもいいので、UXの向上にも繋がります。

【ヘッダーを上部に固定させる方法】HTML編

<body>
    <header>
      <h1><img src="logo.png" alt="英語好きフリーランスの旅日記"></h1>
      <nav>
        <ul>
          <li><a href="#">ホーム</a></li>
          <li><a href="#">アバウト</a></li>
          <li><a href="#">サービス</a></li>
          <li><a href="#">会社概要</a></li>
          <li><a href="#">お問い合わせ</a></li>
        </ul>
      </nav>
    </header>
    <main>
      <div class="content"><img src="content.jpg"></div>
    </main>
  </body>

【ヘッダーを上部に固定させる方法】CSS編

*{
  margin:0;
  padding:0;
  box-sizing: border-box;
}

li{
  list-style: none;
}

img{
  display: block;
}

header{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 10px;
    position: fixed;
    top: 0;
    left:0;
    width: 100%;
    background: #fbf4ec;
    z-index: 999;
}

ul{
  display: flex;
  justify-content: space-between;
}

ul li{
  width: 120px;
  text-align: center;
}

ul li a{
  display: block;
  text-decoration: none;
  color: #333;
}

main{
  padding-top: 99px;
}

.content img{
  width: 100%;
}

解説です。

header{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 10px;
    position: fixed;
    top: 0;
    left:0;
    width: 100%;
    background: #fbf4ec;
    z-index: 999;
}

position:fixedを指定するとヘッダーが固定されます。