【Css】ヘッダーを上部に固定するレイアウト

  • このエントリーをはてなブックマークに追加

ヘッダーが画面上部に固定されているWebサイトをよく見かけます。今回は、上記の図のような、画面をスクロールしてもヘッダーを画面上部に固定させる方法をサンプルコードを提示しながら説明します。

  1. ヘッダーの役割
  2. 下準備
  3. 【Css】position: fixed を利用
  4. 【Css】position: stickyを利用(※2021/01/29 追記)

 1. ヘッダーの役割

Webサイトの上部に位置し、ユーザーが最初に目にする重要な部分です。ヘッダーに以下の2要素を入れるサイトが多く見られます。
・サイトのタイトル、会社名など(トップページのリンク)
・ナビゲーション(他ページへの導線)
お問い合わせ情報を入れるサイトもありますが、要素を沢山入れてごちゃごちゃにならないよう気をつけましょう。

固定ヘッダーにすることで、ナビゲーションを常にユーザーの目に触れさせ、スクロールや検索することなく別のページに誘導することができます。

 2. 下準備

固定ヘッダーを作成する前に、ヘッダーがあるWebページをHtmlとCssを利用して作成します。

●Html

●Css

ヘッダー固定のスタイル適用前なので、画面をスクロールさせると、ヘッダーが上の方にスクロールされて見えなくなってしまいます。

 3. 【Css】position: fixed を利用

position:fix


特定の位置に要素を固定させることができます。fixedを指定すると、画面をスクロールしても要素を指定した絶対位置に固定することができます。

●Css

ヘッダーが左上に固定されるレイアウトに変更できましたが、position:fixedを利用すると、ブラウザ横一杯に広がっていたものが文字列の長さと同じ幅になってしまいます。→ header要素のwidthの指定が必要

また、fixedを指定した要素は通常のレイアウトとは別の層(レイヤー)に分離していることになるため、画像部分がヘッダーの下に入り込んだ状態になります。→ body要素のmarginの指定が必要

●Css

画面スクロールしても、画面上部にヘッダーが表示されるレイアウトに変更できました。

position:fixedを利用すると、ヘッダーを上部に固定するレイアウトの作成が行えますが、幅指定やmargin指定が必要で少し手間がかかります。

 4. 【Css】position: stickyを利用(※2021/01/29 追記)

スクロールしても、画面の決まった位置に要素を固定表示させることができます。fixedより柔軟な固定要素を作成することができます。IEでサポートされていないため、使用する際は注意してください。

●Css

position: stickyと位置を指定するだけで、ヘッダーを上部に固定できました。

  • このエントリーをはてなブックマークに追加

SNSでもご購読できます。

コメントを残す

*