CSSでヘッダーとフッターを常に固定する
Milano design week 2010 :: Zona Tortona By: Bruno Cordioli
ヘッダーとフッターを常に固定の位置に配置する方法。
前にCSSでフッターを画面下部に固定する方法をUpしたので、今回は常に固定する方法をステップ バイ ステップでご紹介します。
※CSSでフッターを画面下部に固定する方法はこちら
ヘッダーとフッターの固定方法
このように「ヘッダー」「ボディ」「フッター」を順に作成して行きます。
１．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>２．全体のレイアウトの設定をする
CSS
/* html,bodyタグの設定 */
html, body{
margin: 0; /* 余白の削除 */
padding: 0; /* 余白の削除 */
width:100%;
height:100%;
}html,bodyタグに対して100%の指定して表示領域を確保します。これでhtml,bodyタグの子要素は画面の表示領域を全て使用できます。
３．ヘッダーを固定する
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」を定義します。
４．フッターを固定する
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となるところのみ変わります。
５．ボディを定義する
CSS
/* ボディの定義 */
div#body-bk{
padding:160px 0 160px 0; /* 上下に160pxを余白を取る */
}
div#body{
width:960px;
margin:auto;
}最後にボディ部を作成します。
ボディ部では、ヘッダーとフッターに重ならないようにpaddingで上下160pxの余白をあけます。
これで、ヘッダーとフッターの固定は完了です。
Trackback URL
http://webnonotes.com/css/header_footer/trackback/Comments
[…] ☆ヘッダーを固定する方法 http://webnonotes.com/css/header_footer/ […]