Blogger Bloggerカスタマイズ WordPress WordPressカスタマイズ

フッターに背景色をつけてブラウザ画面いっぱいに広げる方法

今回はフッターに背景色をつけた後に、フッター全体をブラウザ画面いっぱいまで広げる方法の記録です。

フッターに背景色をつける方法

上級者向けの背景で、外側の背景、メインの背景、ヘッダーの背景はあるのにフッターは無かったので、CSSに追加してフッターの背景に色をつけることにしました。

CSSへの記述は簡単で以下のとおりです。

/* フッターの色 */
footer{
background-color:#FF0000;
}

今回はわかりやすくするために、背景の色を赤にしてあるが、カラーコードを書き換えるだけで好きな色に変更できます。

広げないでそのままでいいときはここまで。

フッターをブラウザ画面いっぱいに広げる方法

ブログやホームページでよく見るデザインです。

CSSへの記述

html {
overflow: auto;
}

body{
overflow: hidden; /*はみ出た部分をどうするか*/
}

footer{
margin: 0 -200%; /* マージンを追記 */
padding: 0 200%; /* マージンで横にはみ出した部分を戻す */
}

まず、bodyではみ出た部分を表示しないように設定する。

その後で、フッターの幅を広げてあげます。
今回は、200%にしているが、250%でも300%でも500%でも大きければ問題ないようです。

同様にヘッダーやメニューバーも広げることが出来る。

スポンサーリンク