CSS サイドバー固定/スクロール追従させる

情報サイトなどで使われている、要素内でスクロールできるフレームのような固定サイドメニューの作り方と広告などをサイドバーでスクロール追従させる方法を説明します。

1. サイドバー固定

See the Pen
sidemenu
by kura (@kuranopen)
on CodePen.

HTML

See the Pen
sidemenu
by kura (@kuranopen)
on CodePen.

CSS

See the Pen
sidemenu
by kura (@kuranopen)
on CodePen.

  1. 右側のメイン要素にmargin-left: 220px;を追加。サイドメニューの横幅分マージンをかけます。
  2. サイドメニューにposition: fixed;を追加。サイドメニューが画面に固定されます。
  3. サイドメニューにheight: 100%;を追加。高さを指定にしないとスクロールバーが表示されません。
  4. overflow: auto;をサイドメニューに追加。サイドメニュー内の要素が高さを超えても、スクロールが表示されます。
  5. width: 220px;を追加し、サイドメニューの横幅を指定。

※サイドバーにbox-sizing: border-box;を指定することで、スクロールバーを要素の幅内に収めることできます。

2. スクロール追従

See the Pen
sidemenu
by kura (@kuranopen)
on CodePen.

CSS

.sticky{
  position: sticky;
  top: 25px;
}
  1. スクロール追従させたい要素にposition: stickyを指定
  2. topで表示位置を調整

position: stickyは要素の影響を受けながら固定します。似たposition: fixedは画面の絶対位置に固定します。

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

プロフィール

kura

個人開発歴5年以上。サイト開発・運営。 ペアでエンジニアとアプリ開発しています。

このサイトではWEBデザイン初心者向けになるべく分かりやすいように解説したり、WEBデザインの便利ツール紹介、開発したりしています。

note