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は画面の絶対位置に固定します。

デザインを本で学びたい人向けの記事

初心者ノンデザイナーがこれからデザインを勉強するのにおすすめの本 4選