CSSでヘッダーとフッターを常に固定する

Milano design week 2010 :: Zona Tortona By: Bruno Cordioli
ヘッダーとフッターを常に固定の位置に配置する方法。
前にCSSでフッターを画面下部に固定する方法をUpしたので、今回は常に固定する方法をステップ バイ ステップでご紹介します。
※CSSでフッターを画面下部に固定する方法はこちら
ヘッダーとフッターの固定方法
このように「ヘッダー」「ボディ」「フッター」を順に作成して行きます。



1.HTMLファイルの準備
まずは、今回使用するHTMLファイルを準備します
HTML
<html> <head>・・・</head> <body> <div id="header-fixed"> <div id="header-bk"> <div id="header">・・・</div> </div> </div> <div id="body-bk"> <div id="body">・・・</div> </div> <div id="footer-fixed"> <div id="footer-bk"> <div id="footer">・・・</div> </div> </div> </body> </html>
2.全体のレイアウトの設定をする
CSS
/* html,bodyタグの設定 */ html, body{ margin: 0; /* 余白の削除 */ padding: 0; /* 余白の削除 */ width:100%; height:100%; }
html,bodyタグに対して100%の指定して表示領域を確保します。これでhtml,bodyタグの子要素は画面の表示領域を全て使用できます。
3.ヘッダーを固定する

CSS
/* ヘッダーの固定 */ div#header-fixed { position: fixed; /* ヘッダーの固定 */ top: 0px; /* 位置(上0px) */ left: 0px; /* 位置(右0px) */ width: 100%; /* 横幅100% */ height: 140px; /* 縦幅140px */ } div#header-bk { background-color:#444; /* 背景色(黒) */ padding:10px 0 20px; /* 上10px、下20pxをあける */ height:110px; /* 縦の高さ110px */ width:100%; /* 横の幅を100% */ } div#header { border: 5px solid #fff; /* 表示領域を白枠で囲う */ height: 100%; /* 縦の表示領域はheader-bkと同じ */ width: 960px; /* 横の幅970px */ margin: auto; /* 中央揃え */ }
「header-fixed」のposition:fixedで位置をウィンドウに対して固定します。
「position:fixed」を指定すると、通常のHTMLの定義から外れるため、その上に同じ幅と高さの「header-bk」を定義します。
「header-bk」はheightが110pxでpaddingが上10px、下20px取っているため、110+10+20で140pxとなります。
そして、最後に表示領域用の「header」を定義します。
4.フッターを固定する

CSS
/* フッターの固定 */ div#footer-fixed { position: fixed; /* フッターの固定 */ bottom: 0px; /* 位置(下0px) */ left: 0px; /* 位置(左0px) */ width: 100%; /* 横幅100% */ height: 140px; /* 縦幅140px */ } div#footer-bk { background-color:#444; /* 背景色(黒) */ padding:10px 0 20px; /* 上10px、下20pxをあける */ height:110px; /* 縦の高さ140px */ width:100%; /* 横の幅を100% */ } div#footer { border: 5px solid #fff; /* 表示領域を白枠で囲う */ height: 100%; /* 縦の表示領域はheader-bkと同じ */ width: 960px; /* 横の幅970px */ margin: auto; /* 中央揃え */ }
フッターの定義はヘッダーとほぼ同じで、「footer-fixed」の位置がbootom:0pxとなるところのみ変わります。
5.ボディを定義する

CSS
/* ボディの定義 */ div#body-bk{ padding:160px 0 160px 0; /* 上下に160pxを余白を取る */ } div#body{ width:960px; margin:auto; }
最後にボディ部を作成します。
ボディ部では、ヘッダーとフッターに重ならないようにpaddingで上下160pxの余白をあけます。
これで、ヘッダーとフッターの固定は完了です。
Related Posts

« WordPressからTwitter/FaceBookに投稿を自動連携する方法 ホームページに最適な画面サイズ »
Trackback URL
http://webnonotes.com/css/header_footer/trackback/Comments
[…] ☆ヘッダーを固定する方法 http://webnonotes.com/css/header_footer/ […]