【CSS】追従ヘッダーの作り方

2022.09.08

CSSのみで簡単に実装可能な追従ヘッダーの作り方を紹介します。

ヘッダーにメニューを載せてスクロール時も追従させることにより、サイト内の他のページにもアクセスしてもらいやすくします。

サンプル

サンプルページ

HTML

<header class="header">追従ヘッダー</header>

CSS

.header {
  position: fixed;  /* 位置を固定する */
  top: 0;  /* 固定する位置を指定 */
  left: 0;  /* 固定する位置を指定 */
  width: 100%;  /* ヘッダーの幅 */
  height: 100px;  /* ヘッダーの高さ */
  background: #ec4646;  /* 背景色 */
}

position: fixed; で位置を固定しています。