CSSで固定ヘッダーがコンテンツに被らないようにするpadding-topテクニック

fixedヘッダーが被る問題を解決するpadding-topテクニック

先生と生徒の会話形式で理解しよう

生徒

「固定ヘッダーを作ったら、ページのタイトルや文章がヘッダーの下に隠れてしまいます…どうすればいいですか？」

先生

「それはよくある問題です。CSSで固定（fixed）ヘッダーを作ると、通常のコンテンツはヘッダーの下に重なってしまいます。」

生徒

「じゃあ、ページの内容をヘッダーの下にずらすにはどうすればいいですか？」

先生

「簡単です。ヘッダーの高さ分だけbodyやメインコンテンツにpadding-topを指定することで、ヘッダーが被らないようにできます。」

生徒

「padding-topってなんですか？」

先生

「padding-topは、要素の上側に余白を作るCSSプロパティです。ここではヘッダーの高さ分の余白を作ることで、固定ヘッダーがコンテンツを隠さないようにします。」

1. 固定ヘッダーとコンテンツが重なる問題とは

position: fixedを使ってヘッダーを画面上部に固定すると、スクロールしてもヘッダーが動かなくなります。しかし、通常のHTMLの流れでは、コンテンツはヘッダーの下を意識せずに配置されるため、文章や画像がヘッダーの下に隠れてしまいます。この状態を「固定ヘッダーが被る問題」と呼びます。

2. padding-topでコンテンツを下にずらす方法

固定ヘッダーの高さを確認して、bodyやmain要素に同じ高さ分のpadding-topを設定します。例えば、ヘッダーの高さが60pxの場合、padding-top: 60pxを指定します。これで、コンテンツはヘッダーの下にきちんと表示されます。


<style>
    body {
        margin: 0;
        padding-top: 60px; /* ヘッダーの高さ分 */
    }
    header {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 60px;
        background-color: #0d6efd;
        color: white;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 1000;
    }
    main {
        padding: 20px;
    }
</style>

<header>
    固定ヘッダー
</header>
<main>
    <h1>ページタイトル</h1>
    <p>この段落はヘッダーの下に表示されます。padding-topを指定しているため、ヘッダーに隠れません。</p>
</main>

ブラウザ表示

3. ヘッダーの高さを変更した場合の注意点

ヘッダーの高さを変えた場合は、bodyやmainのpadding-topも同じ高さに更新する必要があります。CSS変数を使うと、ヘッダーの高さとpadding-topを連動させることができ、メンテナンスが簡単になります。


<style>
    :root {
        --header-height: 70px;
    }
    body {
        margin: 0;
        padding-top: var(--header-height);
    }
    header {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: var(--header-height);
        background-color: #198754;
        color: white;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 1000;
    }
</style>