フーノページ



CSSヘッダー固定

CSSだけでヘッダー固定（一部のみも可）。








syntax。 

header {
    position:sticky;
    top:0;
    }




クリック率＆回遊率も期待できる。


こんにちは、「ふ」です。
スクロールしてもヘッダーやmenuボタンが上部に残って表示されているサイト、よく見かけますよね。
これ、CSSだけで実装することができます。

今回はpositionプロパティのstickyを使って、ヘッダーを固定する方法について解説していきます。また記事後半では、ヘッダーの一部のみを画面上部に残す方法についても紹介します。

メニューバーなどを常に表示させておくことで、ユーザのクリック率、みなさんのサイトの回遊率向上にも期待できます。
ユーザが欲しい情報にたどりつきやすいサイトの構築、そしてPV向上にも役立ちますよ 🎵





position:sticky。 


element {
    position:sticky;
    }

ヘッダー固定にはpositionプロパティを「sticky」に指定することで実現します。
position: stickyとされた要素は、親要素の画面に表示されている部分に対しての位置が固定されます。


stickyで要素を上部に固定させた場合。
左は親要素（黄色）の全体が画面に表示されています。全体が画面内にあるので、その範囲に対して１番上にsticky要素が固定されます。
いっぽう右の場合は、親要素の2/3程度が画面に入っています。その範囲に対しての１番上に、sticky要素が固定されます。

あくまで「親要素の表示されている部分に対しての位置」が保持されるということです。


なのでbody要素（青）直下にstickyを指定された要素は、スクロールに関わらず、画面上部に固定されることになります。

実際に要素を配置して、試してみましょう。 

<body>
<header></header> 
    
<div class = "contents"></div>
<div class = "contents"></div>
<div class = "contents"></div>
<div class = "contents"></div>

</body>

body内にheader要素と、４つのdiv要素を配置しました。div要素はclass名「contents」としています。 

header {
        width:100%;
        height:15vh;
        background-color:darkseagreen;
        opacity:0.8;
    }  
    .contents {
        aspect-ratio:4/3;
        margin:1em auto;
        background-color:beige;
    }

CSSで幅や高さを調整し、観察しやすいように背景色をつけています。


現在の状態⬆︎です。
もちろんスクロールはできますが、まだヘッダーは固定されていません。 

header {
        width:100%;
        height:15vh;
        background-color:darkseagreen;
        opacity:0.8;
        「「１position:sticky;
        top:0;」」
    }

<header>要素に対してposition:stickyを指定します。このとき、topやbottomなどの位置情報を必ず指定しましょう。指定がないと要素が固定されません。
今回はヘッダーを画面上部に固定するので「top: 0」としました。


スクロールしてみてください。
ヘッダーが固定されていますね。




一部のみ固定させる。


ヘッダー部分の一部のみを固定する方法です。
〜次のような場面を考えてみましょう。 

<body>
<header>
    <div class = "titlelogo">
        <h1>フーノページ</h1>    
    </div> 
    <div class = "menubar">
        <div class = "menu"></div> 
        <div class = "menu"></div>
        <div class = "menu"></div>
    </div>
</header> 
    
<div class = "contents"></div>
....
</body>

.titlelogo {
    text-align:center;
    }
.menubar {
        display:flex;
        justify-content:space-around;
    }
.menu {
        background-color:darkseagreen;
        height:5vh;
        width:33%;
    } 
....


ヘッダー部分は、タイトルロゴとその下にメニューバー(緑)で構成されています。
もしここで、ヘッダーをスクロールに対して画面上部に固定させたとき。ヘッダー全体で画面高さの30%近くを占領しているので、さすがにコンテンツ領域を圧迫してしまうでしょう。

そこで。スクロールに対し、緑のメニューバーだけを固定させることにしましょう。

<body>直下の要素にする。 


<body>
<「「２header」」>
    <div class = "titlelogo">
        ....   
    </div> 
    <「「４div」」 class = "menubar">
        ....
    <「「４/div」」>
<「「２/header」」> 
....
</body>

実装するにあたり、HTMLの修正が必要です。

position: stickyは直近の親要素に対して作用するものでした。現状のままではボタン部分である「.menubar」の直接の親要素は<header>なので、このままでは<header>に対してしか、sticky効果が得られません。そこで、ボタン部分を<body>直下の要素にする必要があります。 

<body>
<「「２header」」>
    <div class = "titlelogo">
        ....   
    </div> 
<「「２/header」」>
    
<「「４div」」 class = "menubar">
    ....
<「「４/div」」>
....
</body>

「.menubar」を<header>から取り出し、<body>直下の子要素としました。
そのうえでstickyさせます。 

.menubar {
    position:sticky;
    top:0;
    }



成功です。
スクロールさせるとタイトルロゴは画面外に消えていき、menuバーのみが画面上部に固定されています。

疑問。

ここで疑問が。
position: stickyは「親要素の画面に表示されている部分に対して位置を固定させる」ものでした。

今実装した指定では、メニューバー部分をstickyして「top: 0」としました。
であればページのファーストビューでは⬆︎のように、メニューバーは<body>の１ばん上に配置されるはずです。
が、実際にはタイトルロゴの下にきています。

position:stickyにはもう１つの特徴があるのです。
topやbottomなどで固定位置を指定したとき、方向的に外側にある兄弟要素の領域は侵さないという性質を持っています。


sticky要素を「top: 0」とした場合。
上方向で考えたとき、メニューバーの外側にタイトルロゴが配置されています(Aの部分)。この「方向的に外側」の範囲をsticky要素は飛び越しません。あくまでそれより内側(Bの範囲)において、top: 0に固定されるのです。

タイトルロゴが１ばん上になっているのはそのためですね。そのかわり使用時には、要素の順番に気を付けなければ、です。




簡単すぎましたね。

最後までお読みくださり、ありがとうございました。
今回はCSSのヘッダー固定について紹介してきました。「スクロールに対する要素の位置制御」ということで、もしかするととても複雑なCSS実装が必要なのか、と思いきや。
おそろしく簡単でしたね（笑）みなさんもぜひ利用してみてください。

ではまた〜 🎵



「ふ」です。

ふ

ベクターグラフィック、web、ガジェットなど。役立つ情報や観ていてたのしいページを書いていきたいと思います。