• Home
  • Web制作
  • CSSのposition: sticky;を使いこなそう！思い通りの配置を実現する方法

CSSのposition: sticky;を使いこなそう！思い通りの配置を実現する方法

schedule update
Tags: CSS

はじめに：要素の固定表示を実現する「position: sticky;」とは？

Webサイトを閲覧する際、特定の要素を常に表示しておきたいケースは多くありますよね。例えば、ヘッダーやフッター、サイドメニューなどが挙げられます。

このような場合に役立つのが、CSSのposition: sticky;プロパティです。position: sticky;は、要素をスクロールに合わせて特定の位置に固定表示することができます。

従来、要素の固定表示を実現するにはJavaScriptを使用することが一般的でしたが、position: sticky;を使用すればCSSのみで実現できます。

本記事では、position: sticky;の基本的な使い方から、実際のWebサイトにおける活用例、そして注意点まで詳しく解説いたします。

position: sticky;の基本的な使い方

position: sticky;を使用するには、以下の2つの手順を踏みます。

  1. 対象となる要素にposition: sticky;を指定する
  2. top、bottom、left、rightのいずれかのプロパティで固定する位置を指定する

例えば、ヘッダーを画面上部に固定表示したい場合は、以下のコードを記述します。

header {
  position: sticky;
  top: 0;
}

上記のコードでは、header要素に対してposition: sticky;とtop: 0;を指定しています。これにより、header要素は画面の上端から0の位置に固定表示されます。

top、bottom、left、rightプロパティについて

top、bottom、left、rightプロパティは、要素を固定する位置を指定するために使用します。

  • top: 要素の上端を、親要素の上端からの距離で指定
  • bottom: 要素の下端を、親要素の下端からの距離で指定
  • left: 要素の左端を、親要素の左端からの距離で指定
  • right: 要素の右端を、親要素の右端からの距離で指定

これらのプロパティは、それぞれ独立して設定することができます。例えば、top: 0;とleft: 10px;を同時に指定することで、要素を画面の左上隅から10px右にずれた位置に固定表示することができます。

position: sticky;を活用したWebサイトの実装例

position: sticky;は、様々な場面で活用することができます。ここでは、代表的な使用例をいくつかご紹介します。

1. ヘッダーの固定表示

position: sticky;を使用して、ヘッダーを画面上部に固定表示することができます。これにより、ユーザーはどの位置からでもサイトのナビゲーションを行うことができます。

header {
  position: sticky;
  top: 0;
  background-color: #fff;
  z-index: 10; /* 他の要素よりも手前に表示 */
}

2. フッターの固定表示

ヘッダーと同様に、フッターを画面下部に固定表示することも可能です。

footer {
  position: sticky;
  bottom: 0;
  background-color: #f0f0f0;
}

3. サイドメニューの固定表示

サイドメニューを画面の左または右に固定表示することで、ユーザーは常にメニューにアクセスすることができます。

.side-menu {
  position: sticky;
  top: 0;
  width: 200px;
  height: 100vh;
  background-color: #eee;
}

4. スクロールに合わせて表示内容が変化する要素

position: sticky;とメディアクエリを組み合わせることで、スクロールに合わせて表示内容を変化させることができます。

例えば、特定のセクションまでスクロールしたらサイドバーに特定の情報を表示する、といったことが可能です。

position: sticky;使用時の注意点

position: sticky;は便利なプロパティですが、いくつかの注意点があります。

  • 親要素の高さの影響を受ける

position: sticky;で指定した要素は、親要素の高さを超えて固定表示されません。もし、親要素の高さが足りない場合、要素は固定されずに通常の配置で表示されます。

  • 一部ブラウザの対応状況

position: sticky;は、主要なブラウザのほとんどでサポートされていますが、古いブラウザではサポートされていない場合があります。そのため、古いブラウザにも対応する必要がある場合は、代替手段を検討する必要があります。

まとめ｜position: sticky;をマスターして、より快適なWebサイトを制作しよう！

本記事では、position: sticky;の基本的な使い方から、実際のWebサイトにおける活用例、そして注意点まで解説いたしました。position: sticky;を活用することで、CSSのみで要素の固定表示を実現できます。

ユーザーにとって快適なWebサイト制作に、ぜひposition: sticky;をご活用ください。

関連記事