かわんです。
今回はヘッダを画面上に固定する方法です。とても簡単です。直ぐに実装が出来ます。
ただ、僕の環境で上手くいっている感じなので、上手くいかなかった時はごめんなさい・・・。
他サイト様の記事をご覧ください。
なお、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が必要です。
これで行けるはず。是非とも試しみて下さい。
おしまい。