note.parts-tips.com

ヘッダーやサイドのメニューなど、画面スクロール時に特定の要素を固定したいという場合、これまではJavaScriptを使用して実装する必要がありましたが、現在はCSSのみで実装することが可能です。

以下はそれぞれ「ヘッダーを固定」「サイドメニューを固定」するHTMLとCSSのサンプルコードです。

【ヘッダー固定】

<div class="wrapper">

   

   <header>

      <h1>header</h1>

   </header>

   

   <main>

      <p>main</p>

   </main>

   

   <footer>

      <p>footer</p>

   </footer>

   

</div>

header {

   margin-bottom: 2em;

   padding: 1em;

   background-color: #758a93;

   position: sticky;

   top: 0;

}



h1 {

   color: #ecd5bc;

   font-size: 1.5em;

   text-align: center;

}



main {

   margin-inline: auto;

   padding: 1em;

   color: #ecd5bc;

   text-align: center;

   background-color: #c66e52;

   width: 90%;

   height: 1000px;

}



footer {

   margin-top: 2em;

   padding: 1em;

   color: #ecd5bc;

   text-align: center;

   background-color: #758a93;

}

【サイドメニュー固定】

<div class="wrapper">

   

   <header>

      <h1>header</h1>

   </header>

   

   <main>

      <div class="box_left">

         <p>main</p>

      </div>

      <div class="box_right">

         <p>side</p>

      </div>

   </main>

   

   <footer>

      <p>footer</p>

   </footer>

   

</div>

header {

   margin-bottom: 2em;

   padding: 1em;

   background-color: #758a93;

}



h1 {

   color: #ecd5bc;

   font-size: 1.5em;

   text-align: center;

}



main {

   margin-inline: auto;

   color: #ecd5bc;

   text-align: center;

   width: 90%;

   display: flex;

   align-items: flex-start;

}



.box_left {

   margin-right: auto;

   padding: 1em;

   background-color: #c66e52;

   width: 70%;

   height: 1000px;

}



.box_right {

   padding: 1em;

   width: 20%;

   background-color: #e9b63b;

   position: sticky;

   top: 0;

}



footer {

   margin-top: 2em;

   padding: 1em;

   color: #ecd5bc;

   text-align: center;

   background-color: #758a93;

}

サンプルコードのCSSはレイアウトやデザインも含んでいますが、要素固定の鍵となるのは、それぞれheaderと.box_rightに記述している以下のCSSです。



position: sticky;

top: 0;

positionは要素の配置を設定するプロパティで、stickyは「粘着性がある」という和訳のとおり、付箋のようなイメージです。初期配置は他の要素と同様ですが、画面が下方向にスクロールし position: sticky;が指定された要素に到達すると、その要素は指定した位置にとどまります。この状態で画面が上方向にスクロールされ、 position: sticky;が指定された要素が本来の表示位置に到達すると、以降上方向スクロール時は通常の要素と同様の挙動になります。

サンプルコードでは位置を top: 0;と指定しているので画面上部にピタッと吸い付きますが、上（top）、下（bottom）、左（left）、右（right）、あるいはまとめて（inset）位置指定が可能です。

なお、現時点では position: sticky;を指定した要素が「固定された状態」の場合にCSSを変更する（固定されたら背景色を変えるなど）ことができないので、この場合は position: sticky;を使用せず、JavaScriptを使用して固定する必要があります。

以下は参考情報です。

HTTML/CSS

2025-10-26