スクロールしても上部に固定されるヘッダーを作る方法【HTML/CSS・サンプルコード付き】

ヘッダー

スクロールしても上部に固定されるヘッダーを作る方法

スクロールしても上部に固定されるヘッダーを作る方法を紹介します。Webページを下へスクロールしてもヘッダーが画面上部に残るため、サイト名やナビゲーションメニューへすぐにアクセスできるレイアウトを作れます。ページの途中でもメニューを見失いにくく、ブログ、コーポレートサイト、サービスサイトなどで使いやすい構成です。

このサンプルでは、HTMLとCSSだけを使って、画面上部に固定されるシンプルなヘッダーを作成します。CSSの position: fixed; を使い、ヘッダーを常に上部へ表示させます。JavaScriptは使用しないため、動作が分かりやすく、初心者でも導入しやすい固定ヘッダーのサンプルです。

サイト名、ナビメニュー、お問い合わせリンクを配置した基本的な構成なので、既存サイトのヘッダー部分にも応用しやすいです。ヘッダーの高さ、背景色、文字色、余白、メニュー間隔などはCSSから調整できます。スクロール量の多いページや、いつでもメニューを表示しておきたいページに向いています。

コードについて 本記事のコードはサンプルコードです。ご利用前に必ず動作確認を行ってください。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。

デモ

Sample Site お問い合わせ
このデモ枠の中をスクロールしても、ヘッダーは上部に固定されたまま表示されます。
ページの途中でもナビメニューへアクセスしやすく、サイト内の移動をしやすくできます。
HTMLとCSSだけで作成しているため、JavaScriptを使わずに固定表示を実装できます。
背景色、文字色、ヘッダーの高さ、余白、メニュー間隔などはCSSから変更できます。
ブログ、サービスサイト、コーポレートサイトなど、スクロール量が多いページに使いやすい構成です。
デモ枠の中をスクロールすると、ヘッダーが上部に固定されたまま残る動きを確認できます。

コードをコピーして使おう！

<!DOCTYPE html>
<html lang="ja">
<head>

  <!-- 文字コード -->
  <meta charset="UTF-8">

  <!-- 表示幅を端末に合わせる -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- ページタイトル -->
  <title>スクロールしても上部に固定されるヘッダー</title>

  <!-- CSSファイルを読み込み -->
  <link rel="stylesheet" href="style.css">

</head>
<body>

  <!-- 固定ヘッダー -->
  <header class="scroll-fixed-header_header">

    <!-- サイト名 -->
    <a class="scroll-fixed-header_site-name" href="#">
      Sample Site
    </a>

    <!-- ナビメニュー -->
    <nav class="scroll-fixed-header_nav" aria-label="メニュー">
      <a href="#">ホーム</a>
      <a href="#">サービス</a>
      <a href="#">料金</a>
      <a href="#">会社情報</a>
    </nav>

    <!-- お問い合わせリンク -->
    <a class="scroll-fixed-header_contact" href="#">
      お問い合わせ
    </a>

  </header>

  <!-- ヘッダー固定を確認するための本文 -->
  <main class="scroll-fixed-header_main">

    <section class="scroll-fixed-header_section">
      <h1>固定ヘッダーのサンプル</h1>
      <p>
        ページを下へスクロールしても、ヘッダーは画面上部に固定されたまま表示されます。
      </p>
    </section>

    <section class="scroll-fixed-header_section">
      <h2>セクション1</h2>
      <p>
        固定ヘッダーを使うと、ページの途中でもナビメニューへアクセスしやすくなります。
      </p>
    </section>

    <section class="scroll-fixed-header_section">
      <h2>セクション2</h2>
      <p>
        HTMLとCSSだけで作成しているため、JavaScriptを使わずに導入できます。
      </p>
    </section>

    <section class="scroll-fixed-header_section">
      <h2>セクション3</h2>
      <p>
        背景色、文字色、高さ、余白、メニュー間隔などはCSSから変更できます。
      </p>
    </section>

    <section class="scroll-fixed-header_section">
      <h2>セクション4</h2>
      <p>
        ヘッダーを常に表示しておくことで、長いページでもメニューを探しやすくなります。
      </p>
    </section>

    <section class="scroll-fixed-header_section">
      <h2>セクション5</h2>
      <p>
        スクロールしても上部に残るため、ページ内を移動している途中でも操作しやすい構成です。
      </p>
    </section>

    <section class="scroll-fixed-header_section">
      <h2>セクション6</h2>
      <p>
        このように本文量が多いページで確認すると、固定ヘッダーの動きが分かりやすくなります。
      </p>
    </section>

  </main>

</body>
</html>

ファイル構成と設置方法

このサンプルはHTMLファイルとCSSファイルの2つで構成されています。HTMLファイルに固定ヘッダーと本文の構造を記述し、CSSファイルでヘッダーを画面上部へ固定するレイアウトや文字サイズ、背景色、余白などを設定します。JavaScriptは使用していないため、HTMLとCSSだけでスクロールしても表示され続ける固定ヘッダーを実装できます。 

sample/
├── index.html
└── style.css

index.htmlをブラウザで開くと、ページをスクロールしてもヘッダーが画面上部に固定されたまま表示されます。サイト名、ナビゲーションメニュー、お問い合わせリンクはHTMLを書き換えることで自由に変更できます。ヘッダーの高さ、背景色、文字色、余白、メニュー間隔などのデザインはstyle.cssから調整できます。

コメント