【CSS】ヘッダを画面上に固定する方法

かわんです。

今回はヘッダを画面上に固定する方法です。とても簡単です。直ぐに実装が出来ます。

ただ、僕の環境で上手くいっている感じなので、上手くいかなかった時はごめんなさい・・・。

他サイト様の記事をご覧ください。

なお、HTMLとCSSを書くことになるので、バックアップしてから作業して下さい。何かあってもサポート出来ないので自己責任でして下さいね。

HTMLはこんな感じ

HTMLはこんな感じです。

<header id="gloval_header">
    <h1><a href="index.html" id="home">Y DESIGN</a></h1>
 </header><!-- gloval_header -->

説明するまでもないですが(笑)。headerに関して、idである「gloval_header」を割り当てています。コヤツに対してCSSを割り当てます。

CSSはこんな感じ

#gloval_header {
    position: fixed;
    top: 0;
}

たったこれだけ。ヘッダを画面幅いっぱいにしたいないなら、さらに「width: 100%;」を割り当てます。

高さを出したいのだったら、さらに「height: 60px;」を割り当てます。なお、「60px」はお好みで。

コンテンツ部分とカブる

ヘッダを固定するとコンテンツがカブッてきます。なので、コンテンツにpadding-topを付け加えて下さい。

具体的にはヘッダの高さが60pxであればpadding-top:60pxに最低でもして下さい。

これでカブらないはずです。以下、一例です。

<header id="gloval_header">
    <h1><a href="index.html">Y DESIGN</a></h1>
 </header><!-- gloval_header -->
<div id="contents">
コンテンツ
</div>

上の場合だとcontentsにヘッダの高さ分のpadding-topが必要です。

これで行けるはず。是非とも試しみて下さい。

おしまい。