CSSでヘッダーとフッターを固定する方法

ヘッダーやフッターを固定したい場面で、昔はフレームを使うのが主流でした。

しかし、現在は様々な理由からフレームを使うことは難しいです。CSSで簡単にヘッダーとフッターの固定を実現させることができるので、こちらを採用するようにしましょう。

CSSでヘッダーとフッターを固定する方法

まず、位置を固定するにはposition: fixed;を利用します。ヘッダーもフッターもこのプロパティで位置を固定します。更に、topやbottomを併用することで、一番上や一番下の位置の表示をします。

ヘッダーを固定

フッターを固定

position: fixed;が対応していないIEなどの一部のブラウザでは、position: absolute;などを使う必要があります。また、ヘッダーの一部だけをスクロールする時に固定させたい場合は、javascriptを併用してCSSで様々な設定を行わなければなりません。

スクロールの途中で要素が上部に来た時に上部で要素を固定したい時などに、position: fixed;を使うと要素がスクロールせずに最初の位置で固定されてしまう場合、position: fixed;は使用しません。

position: absolute;やposition: relativeを使用します。