CSSだけでヘッダー固定。

〽️ 便利なプロパティも登場。







CSSだけでできるよ。

こんにちは、「ふ」です。
最近のwebページなどではよく見かけるようになりました、画面をスクロールしてもヘッダ部分だけが画面に残って表示される仕組み。




これ、実はCSSだけで簡単に実装することができます。
今回は固定ヘッダーを一緒に作っていきましょう。






ヘッダーパーツを準備。

ヘッダーに載せたいロゴ画像などを準備します。

logo.png




今回はillustratorでPNG画像を作ってみました。勿論、テキストでも構いません。 ちなみにデザインされたフォントを貼りたいときには、Google Fontsからダウンロードすると便利です⬇︎。



Google Fontsを使ってみよう。



用意した画像やテキストを固定用の<div>〜</div>の中に貼り付けます。

HTML

CSS

#kotei { background-color:coral; width:100%; height:4em; text-align:center; } #kotei > img { height:100%; }

CSSについてですが、responsive対応のために高さは相対値(今回はem)で指定した方がいいでしょう。でないとスマホで表示したときにバカでかいヘッダーになってしまいます。

ではプレビューしてみましょう。




ブラウザ

おや、画面上部に少し空白ができてしまっています。これだと画面をスクロールさせたとき、ヘッダーの上部からも本文が覗いてしまいます。
Chromeの開発ツールで余白の状態を確認してみましょう。




body要素自体にデフォルトでmargin-topが指定されていたみたいですね。
CSSを修正します。

CSS

body { margin-top:0; }


ブラウザ

これでヘッダーが画面上ぴったりにくっつきました。



position:fixed。

スクロールさせるべき本文も追加しましょう。本文全体を<div>〜</div>で囲んでおきます。

見出し

本文本文本文本文本文本文本文本文
本文本文本文本文本文本文本文本文
本文本文本・・・ 「「3〜以下略。」」



ブラウザ

この状態ではまだ、下へスクロールさせるとヘッダーは画面外に消えてしまいます。ヘッダーを固定させるには、positionプロパティをfixedに指定します。

CSS

#kotei { background-color:coral; width:100%; height:4em; text-align:center; 「「1position:fixed;」」 }

ブラウザ




これでヘッダーは固定されましたが、その後ろに「本文」の上の部分が隠れてしまいました。 「本文」のpadding-topをヘッダーの高さの分だけ取りましょう。たしか「4em」に設定していましたよね。

CSS

#honbun { padding-top:4em; }



ブラウザ

これで完成です。「本文」も全体が表示され、ヘッダー固定のままスクロールさせることができます。






もっと便利なCSSがあった。

新しく登場したpositionプロパティの値として、「sticky」というものがあるのでちょっと使ってみましょう。

CSS

#kotei { background-color:coral; width:100%; height:4em; text-align:center; 「「1position:sticky; top:0;」」 } #honbun { 「「3/*padding-top:4em;*/」」 }

ヘッダーのpositionプロパティを「sticky」に変更。その場合、bodyからの配置位置を「0」に指定してやります。
また、本文はpadding-topをとる必要がなくなるのでコメントアウトさせておきましょう。




ブラウザ

おお、これを使うと本文のpadding調整も必要なく、さらに簡単に固定ヘッダーが実装できました。


「sticky」とは「粘着」という意味だそうです。
relative(相対位置指定)やabsolute(絶対位置指定)とは別に「粘着位置指定 」というものに分類されます。
そうすると、例えば画面中央に粘着させてみるとか・・・本題から脱線しますがちょっとやってみますか。

CSS

#kotei { background-color:coral; width:100%; height:4em; text-align:center; position:sticky; 「「3/*body中央付近に配置*/」」 「「1top:40vh;」」 }






ブラウザ

うざい。

余程デザイン性を推したい見開きページなどには使えるかもしれませんが、文章を読ませたいコンテンツではちょっと使いどころが・・









簡単でしたね。

いかがでしたか?固定ヘッダーはこのように簡単なCSSだけで実装することができます。今回はロゴ画像のみでやってみましたが、ここにメニューボタンなどを置けばユーザにとっても操作しやすくなりそうです。

ただ、画面上での固定スペースが広すぎると、特に小さい画面のスマートフォンでは本文スペースをとても圧迫してユーザをイライラさせてしまうので注意してください。

「ふ」は未だにiPone SEの4インチ画面でブラウジングしているのですが、特にサイズをpixelなどの絶対値で指定されたバナーが画面に割り込んでくると可視スペースが昔のガラケーほどになってしまうのだ・・
あ、個人的なお話になってしまいましたね。


再び脱線してしまいました。またお会いしましょう。













「ふ」です。

swift、web、ガジェットなど。役立つ情報や観ていてたのしいページを書いていきたいと思います。

🐧 twitter 🐧