【CSS】ヘッダを固定する方法

かわんです。

今回は、CSSでヘッダを固定する方法です。とても簡単ですので、最後まで読み進めて下さいね。

まずは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: 80px;
}

「position: fixed;」と「top: 0;」を設定。「width」と「height」はお好みで設定して下さい。

コンテンツがかぶる

ヘッダを固定すると、コンテンツがヘッダにかぶります。そんな時は、コンテンツに「padding-top」を設定します。 上で設定した「height」以上の数値にします。

これで基本かぶらないです。

注意点

今回は僕の環境で実現出来たことです。もし上手くいかない場合はごめんなさい・・・。他サイト様の記事をご確認下さい。

また、HTMLとCSSをいじるので、予期せぬトラブルが発生することがありますので、バックアップしてからお試し下さい。

なお、サポート出来ませんので自己責任で行って下さいね。

さいごに

ということで、色々と書いてみました。

ヘッダを固定するのは意外に簡単です。慣れている人なら10分ほどで出来るでしょう。

おしまい。