この記事は2分で読めます

【CSS】要素(オブジェクト)を固定する方法

  • 投稿日
  • 更新日

あとで読む

【CSS】要素(オブジェクト)を固定する方法

今回は、CSSで要素を固定する方法について解説します。ヘッダーやハンバーガーメニューを画面上部に固定するなど様々な応用ができるので、ぜひ覚えていきましょう。

イッパイアッテナ

はじめまして、イッパイアッテナです。

ITと教養で、優秀なネコの手となり、あなたのあらゆる問題を解決します。あなたの相談役だったり、デザイナーだったり、広報だったり、わたしたちは”イッパイ”の顔をあなたに見せることができます。

要素(オブジェクト)を固定する2つの方法

要素を固定するCSSは、主に以下の2つです。

  • 「position: fixed;」・・・指定した位置で要素を固定
  • 「position: sticky;」・・・親要素のスクロールに応じて要素が固定

では、詳しく見ていきましょう。

position: fixed で固定する方法

まずは、position: fixed;で固定する方法についてです。

position: fixed;を当てた要素は、ページが開くのと同時に表示され、スクロール時も指定した位置にとどまって表示されます。

position: fixed;で固定していない場合

赤色のボックスに注目してください。

固定しない場合は、スクロールと同時に要素も上へ流れてしまいます。

position: fixed;で固定した場合

同じく赤のボックスに注目してください。

position: fixedで固定すると、スクロールしても画面上から消えず上部で固定されています。

先の要素にfixedを指定した場合、後の要素がその要素に被さってしまうので、その場合は「z-index」プロパティを活用して重ね合わせの順序を指定しましょう。

書き方は以下の通りです。

固定したい要素の名前やクラス名 {
  position: fixed;
  top: 0px;/*自分が固定したい位置(例は上から0pxの位置)*/
  left: 10px;/*自分が固定したい位置(例は左から10pxの位置)*/
}

位置は、top、bottom、left、rightで指定できます。

position: sticky で固定する方法

続いて、position: sticky;で固定する方法についてです。

position: sticky;を当てた要素は、スクロールに応じて親要素の範囲内で位置を固定できます。

position: sticky;で固定していない場合

黄色のボックスに注目してください。

stickyで固定しない場合は、スクロールすると青色の親要素とともに黄色の子要素も上へ流れてしまいます。

position: sticky;で固定した場合

position: sticky;で固定すると、青色の親要素が表示されている間は黄色の子要素も指定した位置で表示されています。親要素の幅/高さ分を過ぎると、スクロールとともに流れていきます。

書き方は以下の通りです。

セレクタ(固定したい要素の名前やクラス名) {
      position: sticky;
      top: 0px;/*自分が固定したい位置*/
    }

position: sticky ;を指定した要素の親要素にoverflow: hidden ;(要素からはみ出た部分は見えなくなる)がついていると機能しないので注意しましょう。

まとめ

今回は要素の固定の方法について解説しました。それぞれの違いを理解して正しく使用しましょう。

この記事を書いた人

かすみ
かすみ

将来は庭のテントでWEBデザインのお仕事がしたいです🏕 フェス・邦楽ロック大好き! テーマパークから介護まで接客経験値豊富な人間🚶‍♀️ 私なりの気づきを皆さまにお届けします✨

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

Web制作について相談してみませんか?

必須は必須項目です。弊社へお問い合わせいただく方は、下記の「個人情報の取り扱いについて」を必ずお読みください。

会社名

任意

お名前

必須

メールアドレス

必須

電話番号

任意

お問い合わせ内容

必須