ヘッダーを固定する方法

2021.10.14 | Tech

皆さんこんにちは。池ちゃんです。今回はhtmlとcssで簡単にヘッダーを固定する方法を解説していきたいと思います。

Stickyという新しいパラメータ

テック系の記事を読み漁っていたら、Stickyというパラメータを発見しました。一体これは何なのか、私は早速調べてみました。

MDN Web Docsには次のように書かれています。

【要素は文書の通常のフローに従って配置され、直近のスクロールする祖先および包含ブロック (直近のブロックレベル祖先、表関連要素を含む) に対して top, right, bottom, left の値に基づいて相対配置されます。オフセットは他の要素の配置には影響を与えません。】

MDN Web Docs

なるほど分からん……笑

ぱっと見ただけでは良く分かりません。しかし、Stickyを使う際は「top、right、bottom、left」の値を指定してあげれば良いのだなとは分かりました。早速実行してみましょう。

例として、このサイトのヘッダー部分の記述を挙げます。（早速使ってみたかったので、Stickyを使ってこのWebサイトは作っています）

HTML

CSS

メインの記述となるのは、ハイライトで示している、

です。たったこれだけの記述でヘッダーを固定する事が出来ました。簡単ですよね。

「いやいや、それならfixedと作業量一緒じゃん」と思った人も居ますよね。

私も最初そう思っていたのですが、実は違いました。

fixedで指定すると、fixedの下に次の要素が重なる（z-indexでヘッダーを上に描画するため）現象が起こり、例えばヘッダーの次に画像を100vhとか指定して全面的に出した際、次の要素の画像上部が消えたりしていました。別途次の要素にtopパラメータを仕込んだり面倒でした。しかし、stickyはヘッダー一番上に存在している時の幅は確保されているので、ヘッダー要素の下に次の要素が回り込む心配が無いのです。これは楽ですよね。

IEは非対応なので注意

ただ、一点注意があるのが、IEは非対応だという事です。IEはまもなくサポートが終了するので、IEの事は考えなくていいかなとは思いますが、IEを使う事を前提に開発を進めなければいけない案件等では注意が必要です。

以上、ヘッダーを固定する方法でした。