ヘッダーを最上部・フッターを最下部に固定する方法とは？ コーディングの効率化を極めるテクニック

コーディングの効率化を極めるためのテクニック

ホームページを見ていて、ヘッダーやフッターが画面最上部　/最下部に固定されているデザインをよく見かけます。

今回は、そのような小技を極めてみました。

ヘッダーを最上部に固定する方法

CSS

header{
    width:100%;
    height:50px;
    background:red;
    position:fixed;
    left:0;
    top:0;
}

これでヘッダーを最上部に固定できます。

フッターを最下部に固定する方法

同じくフッターを最下部に固定する方法です。

css

footer{
    width:100%;
    height:50px;
    background:blue;
    position:fixed;
    left:0;
    bottom:0;
    
}

▽では、実際に試してみました。

これでヘッダー・フッター共にポジションで固定できました。