CSSヘッダー固定の作り方と使い方完全ガイド！初心者でも簡単にできる方法と応用例も紹介

はじめに

ウェブサイトのヘッダーは、サイトのナビゲーションを提供するために非常に重要です。

しかし、ユーザーがスクロールしているときにヘッダーが画面上部から消えてしまうと、ナビゲーションが失われてしまい、ユーザーエクスペリエンスが悪くなってしまいます。

そこで、CSSを使ってヘッダーを固定することができます。

本記事では、CSSを知らない初心者でも簡単にヘッダーを固定する方法を紹介します。

●ヘッダーの固定方法

ヘッダーを固定するためには、CSSのpositionプロパティを使用します。

positionプロパティは、要素の配置方法を指定するプロパティです。

次のように、ヘッダー要素にposition: fixed;を設定することで、ヘッダーを画面上部に固定することができます。

header {
  position: fixed;
  top: 0;
  width: 100%;
}

上記のコードでは、ヘッダー要素に対してposition: fixed;を設定しています。

また、top: 0;を指定することで、画面上部にヘッダーを配置しています。

さらに、width: 100%;を指定することで、ヘッダー要素を画面幅いっぱいに広げています。

●応用例

ヘッダーを固定することで、ユーザーがスクロールしているときでも常にヘッダーが表示されるため、ナビゲーションを提供することができます。

しかし、ヘッダーを固定するだけではなく、より魅力的なヘッダーにするための応用例を紹介します。

ヘッダーに透明度を追加する

ヘッダーに透明度を追加することで、ヘッダーがスクロールによって隠れても、コンテンツを見逃さずに済みます。

次のように、background-colorプロパティのrgba値で、透明度を指定することができます。

header {
  position: fixed;
  top: 0;
  width: 100%;
  background-color: rgba(255, 255, 255, 0.9);
}

上記のコードでは、ヘッダー要素に対して、background-color: rgba(255, 255, 255, 0.9);を指定しています。

rgbaの最後の数値は透明度を表しており、0に近いほど透明度が高くなります。

ここでは0.9を指定しています。

スクロールするとヘッダーが小さくなる

スクロールするとヘッダーが小さくなるアニメーションを追加することで、よりダイナミックなヘッダーを作ることができます。

次のように、スクロール量に応じて、ヘッダーの高さを変化させることができます。

$(window).scroll(function(){
  var scroll = $(window).scrollTop();
  if (scroll > 0) {
    $('header').addClass('small');
  } else {
    $('header').removeClass('small');
  }
});

上記のコードでは、jQueryを使用して、スクロール量に応じて、ヘッダーのクラスを切り替えることで、ヘッダーの高さを変化させています。

次のように、ヘッダーのサイズを変えるためのCSSを追加します。

header {
  position: fixed;
  top: 0;
  width: 100%;
  height: 100px;
  transition: height 0.3s ease-in-out;
}

header.small {
  height: 50px;
}

上記のコードでは、header要素に対して、heightプロパティを指定しています。

また、header.smallクラスを追加することで、スクロールしたときにヘッダーの高さが変わるようになっています。

さらに、transitionプロパティを使用することで、高さの変化にアニメーションを付けることができます。

まとめ

本記事では、CSSを知らない初心者でも簡単にヘッダーを固定する方法を紹介しました。

また、応用例として、ヘッダーに透明度を追加する方法や、スクロールするとヘッダーが小さくなるアニメーションを追加する方法を紹介しました。

これらの方法を組み合わせることで、より魅力的なヘッダーを作ることができます。

ヘッダーの固定は、ユーザーにとってナビゲーションを提供するために非常に重要な機能です。

ヘッダーを固定することで、ユーザーエクスペリエンスを向上させることができます。

ぜひ、本記事で紹介した方法を試してみてください。