ヘッダー、フッターをブラウザ幅いっぱいにする方法

ヘッダー、フッターをブラウザ幅いっぱいにする方法

色んな方法があると思いますがスタイルシートでmin-widthを使い簡単に出来ます。通常のホームページレイアウトは大きく分けると、全体を囲むボックス、ヘッダー用ボックス、メイン用ボックス、フッター用ボックスになっています。

レイアウトイメージ

このレイアウトを全体を囲むボックスを無くし、ヘッダー用ボックス、メイン用ボックス、フッター用ボックスに変えさらにヘッダーを幅いっぱいにする為のボックス(仮名称headerbg)とフッターを幅いっぱいにする為のボックス(仮名称footerbg)を加えます。

幅いっぱいにするボックス

ここではメインの幅を940pxで作成した例で説明していきます。ヘッダーボックス(仮名称header)の幅を940px、メインボックス(仮名称container)の幅を940px、フッターボックス(仮名称footer)の幅を940pxにします。そこにヘッダーフッターをブラウザ幅いっぱいにするボックスが入っています。下記のhtmlがその例です。

<!--ヘッダーを幅いっぱいにする為のボックス -->
<div id="headerbg">
<!--ヘッダー --> 
<div id="header">
ここに内容を書き込む
</div>
<!--ヘッダー終わり -->
</div>
<!--ヘッダーを幅いっぱいにする為のボックス終わり -->

<!--メインボックス -->
<div id="container">
ここに内容を書き込む
</div>
<!--メインボックス終わり -->

<!--フッターを幅いっぱいにする為のボックス --> 
<div id="footerbg">
<!--フッター --> 
<div id="footer">
ここに内容を書き込む
</div>
<!--フッター終わり -->
</div>
<!--フッターを幅いっぱいにする為のボックス終わり -->

このhtmlに対するスタイルシートが下記になります。

/* ヘッダーを幅いっぱいにする為のボックス*/
#headerbg {
background-image: url(画像ファイルのurl);
width:100%;
min-width:1000px;
}
/* ヘッダー*/
#header       {
width: 940px;
margin-right: auto;
margin-left: auto;
}
/* メインボックス*/
#container {
width: 940px;
margin-right: auto;
margin-left: auto;
}
/* フッターを幅いっぱいにする為のボックス*/
#footerbg {
background-image: url(画像ファイルのurl);
width:100%;
min-width:1000px;
}
/* フッター*/
#footer        {
width: 940px;
margin-right: auto;
margin-left: auto;
}

headerbg、footerbgにmin-width:1000pxサイズが設定してあるので、ブラウザサイズを横幅1000px以下に縮小すると横スクロールバーが出てきます。

headerbg、footerbgにwidth:100%だけ設定している方法では1000px以下に縮小した際右端の背景が途切れてしまいます。
又headerbg、footerbg以外のボックスサイズを同サイズのwidth: 1000pxにしても右端の背景が途切れてしまいます。

そこで、その対策としてheaderbg、footerbgにはmin-width:1000pxを使い、あえて60px大きい幅に設定して、縮小した際右端の背景が途切れないようにしてあります。

ブラウザ幅いっぱい

最終更新日: 2013年2月3日

  • このエントリーをはてなブックマークに追加
  • にほんブログ村 IT技術ブログ WordPressへ
  • ameba
  • addthis
  • Clip to Evernote

ヘッダー、フッターをブラウザ幅いっぱいにする方法の関連記事

ヘッダー、フッターをブラウザ幅いっぱいにする方法” への32件のコメント

  1. 書かれている通りにコーディングしたのですが、どうしても左右の端に少し空白ができてしまいます・・・

    解決策はないでしょうか?

  2. 自己解決しました(^^;

    * {
    PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 0px
    }

    を入れてなかったです・・・

    お騒がせしました。

  3. 初めまして
    この記事に出会うまで丸3日ほど苦しみました
    センタリングしたヘッダーとフッターを
    さらにもうひと枠divで囲うところまではできていましたが
    その左右のサイズを「100%」に指定する事を知りませんでした
    感謝です、ありがとうございました

  4. 初めまして。ブログのヘッダーの幅いっぱいにするため調べていたところたどり着きました。上記のcssを貼り付けしたのですが、幅いっぱいになるどころか、逆に小さくなってしまいました。何が問題なのか良くわからずで連絡させて頂きました。お忙しいとは思いますがご回答のほうお待ち致しております。

    宜しくお願い致します。

    http://ameblo.jp/dkntk612/

    • コメントありがとうございます。

      この記事のサンプルコードは一からホームページを作成した場合のコードになりますので、レンタルブログの場合は使われているグループidによって書き方が違ってきます。

      上記アメブロのサイトですと、たぶん下記のようなコードになると思います。

      #frame {
      	width: 100%;
      }
      #wrap {
      	width: 1070px;
      	margin-right: auto;
      	margin-left: auto;
      }
      #overHeader {
      	background-image: url(画像ファイルのurl);
      	width:100%;
              background-repeat: repeat-x
              min-width:1070px;
      }
      #header {
      	width: 1070px;
      	margin-right: auto;
      	margin-left: auto;
      }
      

      又何かありましたら遠慮なくコメントしてください。

  5. はじめまして、
    記事を参考にさせて頂きながら
    ホームページを作成しています。

    一応記述どおりにhtmlとcssを打ち込み、
    ヘッダーの背景が確かに横に繰り替えされる所まで
    いったのですが、どうしても左右に少し空白ができてしまいます。

    お忙しい中申し訳ございませんが

    何か解決策がありましたら、
    ご回答よろしくお願いします。

    • はじめまして

      多分なんですが以前質問のあったt.fさんの内容と同じだと思います。

      下記のようにbodyのmarginを0pxにすると余白はなくなると思います。

      body { margin: 0px; }
      

      これで余白がなくならない時は他のスタイルシートのmarginかpaddingが邪魔しているのかもしれません。

      又わからない時はお気軽にコメントしてください。

  6. 初めまして。
    ヘッダーとフッターの幅をいっぱいにする方法がわからず、半泣き状態だったのですが、こちらの記事を参考にコードを書いたらちゃんとできました!
    本当にありがたい記事です。
    感謝いたします。

    • 初めまして。

      こんなに喜んでもらって
      お役に立ててよかったです。

  7. 初めまして。
    ヘッダーとフッターの背景を幅いっぱいにしたく検索したらたどり着きました!
    ヘッダーは幅がいっぱいになりました(o^^o)しかしフッターの背景がどうしても幅いっぱいにならず困ってしまいました。
    何かアドバイスがあれば教えてほしいです。
    お忙しいところすみませんが、宜しくお願いします。

    • コメントありがとうございます。

      ハルカさんのサイトを確認させてもらうと何処がいけないのかが分かるかも知れません。

  8. お返事ありがとうございます。☆
    私のホームページはhttp://www.harukacouture.comです。
    あまり知識がないのに色々いじってしまったため、おかしいことになっていそうです。。
    本当にすみませんが、宜しくお願いします。

    • サイト確認しました。少し言いにくいんですが、htmlソースのほとんどにミスがありました(^^;

      ですのでヘッダーフッターを広げる前のソースにミスがある為出来なかったのが原因です。

      取りあえず強引ですが応急的な方法は次のようになります。

      htmlソースの一番下に下記のようなコードがあると思います。

      </td>
      </div> 
      <div id="footerbg"> 
      <table id="footer" width="800" cellpadding="0" cellspacing="0" border="0" bgcolor="#a0d2d1">
      <tr><td>
      <div>
      <div id="menu_2">	
      <a href="http://www.harukacouture.com/?mode=sk"><span style="font-size:x-small;">特定商取引法に基づく表記</span></a>   <a href="http://www.harukacouture.com/?mode=sk#payment"><span style="font-size:x-small;">支払い方法について</span></a>   <a href="http://www.harukacouture.com/?mode=sk#delivery"><span style="font-size:x-small;">配送方法・送料について</span></a>   <a href="http://www.harukacouture.com/?mode=privacy"><span style="font-size:x-small;">プライバシーポリシー</span></a>
      </div>
      <div id="copy">Copyright (C) 2012 Haruka Couture. All Rights Reserved.</div>
      </div>
      </td></tr>
      </table>
      </div> 
      </body></body></html>
      

      この箇所を下記のコードにすると取りあえずはフッターが広がりますが、かなり強引な方法です。ですのでコードを書き換える前に元々のhtmlファイルを別名などで保存して試してください。

      </td>
      </div>
      <table><tr><td></td></tr></table></div> 
      <div id="footerbg">
      <div id="footer" width="800" cellpadding="0" cellspacing="0" border="0" bgcolor="#a0d2d1">
      <div><div id="menu_2"><a href="http://www.harukacouture.com/?mode=sk"><span style="font-size:x-small;">特定商取引法に基づく表記</span></a><a href="http://www.harukacouture.com/?mode=sk#payment"><span style="font-size:x-small;">支払い方法について</span></a><a href="http://www.harukacouture.com/?mode=sk#delivery"><span style="font-size:x-small;">配送方法・送料について</span></a><a href="http://www.harukacouture.com/?mode=privacy"><span style="font-size:x-small;">プライバシーポリシー</span></a></div><div id="copy">Copyright (C) 2012 Haruka Couture. All Rights Reserved.</div></div></div>
      </div>
      </body></body></html>
      

      もしこのサイトで運営をしていくのなら、これから先の事などを考えると面倒ですが一から作り直したほうがいいかも知れません。

      又何か分からない事があったらお気軽にコメント下さい。

  9. アドバイスありがとうございます!!
    やはりほとんどミスがあるんですね(^-^;笑
    保存して一から作り直してみます。
    またこちらのサイトを参考に頑張ってみます☆
    ありがとうございました(*^▽^*)

    • いえいえ(^^;

      また何かあったらお気軽にコメントください。

  10. ずーっと悩んでいたのがこちらのサイトのおかげで
    解決しました!!
    (サイト全体を中央揃えにしたかったのですがコンテンツに
    背景をもっていてウインドウ幅いっぱいにその背景を表示したかった
    のでwidthを指定したくなかったので、100%にしてたのですが
    それだとマージンの 0 auto がきかず、困っていました。。
    が、コンテンツの背景をbodyにしてしまい、
    ヘッダーとフッタに背景を指定してこちらのこの方法でやれば
    サイト全体が中央に揃いました!!)

    嬉しくて思わずコメントさせていただきました。
    ありがとうございます。
    これからも私のような初心者のためにがんばってください。

    • コメントありがとうございます。

      お役に立てて良かったです。

      又よかったら遊びにきてください(^-^)

  11. このサイトのおかげでいくつか解決した点があるのですが、
    まだいくつか問題がありまして、
    どうかよろしくお願いします。

    パソコンから閲覧するには問題ないのですが、
    iphoneから閲覧するとheader,footerともに右の方で
    header,footerの背景が切れてしまいます。

    とうほう素人でmin-widthの設定のしかたがわかりません。
    dreamweaverを使用しているので、CSSスタイルでルール定義が出来れば助かります。
    お手数おかけしますが、よろしくお願いします。

    • コメントありがとうございます。

      たくさんの質問を元に記事で紹介しているコードを変更させていただきます。

      もしよかった再度記事のコードを確認され試してみてください。

      とっても貴重な質問ありがとうございました。

  12. はじめまして、いくつかサイトを検索し、ようやくここにたどり着きました。
    当方楽天ショップを運営いたしておりますが、上記にあるようにタグを入れてみたのですが、まったく変化がなく、どのようにすればいいのか、わからず、コメントさせていただきました。楽天RMSでも可能でしょうか?一度お教えていただければ幸いと存じます。よろしくお願い致します。

  13. ヘッダー、フッターを幅いっぱいにしたくて検索してたらここのサイトにたどり着きました。
    けれど、全くの初心者でどこをどう書き換えればいいのかわかりません。
    教えていただけないでしょうか?

  14. おかげさまで、ヘッダーを幅いっぱいにすることができました。
    ありがとうございます。

    こちらのサイトのように、半透明のメニューを固定表示したくて奮闘しているのですが
    ソースを拝見しても、なかなかわかりません。
    よろしければ、ご教授いただけないでしょうか?

  15. はじめまして。
    ヘッダー、フッターを幅いっぱいにしたくて検索してたらここのサイトにたどり着きました。
    CSS等の初心者なのですが、貴殿のHPのようにこのヘッダー、フッターを上下それぞれ固定するには
    どのようなCSSに何を記述すれば良いのでしょうか。
    いくつか試してみたのですが、フッターがどうしても上がってきてしまいます。
    宜しくお願いします。

    • コメントありがとうございます。
      サイトを見ないと何とも言えないんですが、多分画面に対して記事数が足りずにフッターが上に来ているだけなんじゃないかと思います。

  16. コメントありがとうございます。
    タグの位置が悪かったようでの前に置きましたら固定されるようになりました。
    ただ、今はに記入した文字がフッターの近くに表示されてしまい
    苦戦中です。ありがとうございました。

  17. はじめまして!
    どうしてもヘッダー部分を画面いっぱいにしたくて6時間くらい悩んでいます。
    アメーバブログで行っているのですが、出来ません(汗)
    知識がないだけだと思うのですが助けてください。

    アメーバではスタイルシートの編集で行うのですが
    HTMLとスタイルシートはどこにどのような形で入力すればいいのでしょう?
    初歩的な質問かもしれませんが回答宜しくお願します。

    • コメントありがとうございます。

      アメブロの基本はCSS勉強中スタッフのブログ

      http://ameblo.jp/css-staff/
      などに書かれているので読んでみると良いかと思います。

      又HTMLとスタイルシートをどのような形で入力するかが分からない場合はGoogleなどでhtmlとスタイルシート(css)の基礎を学ばれたほうがいいと思います。

      とりあえずアメブロでのヘッダー部分を画面いっぱいに見せる方法は下記のようなコードをスタイルシートに貼り付けてやると出来ます。

      但しアメブロは広告の配置などが変わるので、その辺を気を付けないといけません。
      ですので、時間がかかるかも知れませんが、今後もカスタマイズを行って行くのであればHTMLとスタイルシートの基礎から色んな本やサイトを見られて学ぶことをオススメします。

      /*******************************************
      トップバナー(広告)が入っていたエリア
      ********************************************/
      .headerBnrArea {
      padding: 0;
      }
      
      .headerBnr {
      padding: 0;
      }
      
      
      /********************************************
       擬似的にフルサイズヘッダーに見せるエリア(背景)
      *********************************************/
      .skinHeaderFrame {
      background: #ccc;
      margin: 0 0 30px;
      }
      
      /********************************************
       ヘッダーのタイトル箇所(ここで高さを調整してください)
      *********************************************/
      .skinHeaderArea {
      height: 200px;
      }
      
  18. お世話になっております。
    私もヘッダーを横いっぱいに広げるために
    こちらのサイトを参考にさせていただきました。

    本サイトを参考にし、横いっぱいに広げることは
    できたのですが、サイトの中でクリックしたまま
    右に移動させるとサイトが無限に(?)横へ
    スクロールしてしまいます。
    (※横スクロールバーは出ていません)

    可決策をご教授願いませんでしょうか。
    よろしくお願いいたします。

    以下、CSSです。
    #headerbg {
    margin: 0 -600%;
    padding: 0 600%;
    background: #016632;
    width:100%;
    min-width:1090px;
    position: relative;
    z-index: 9999;
    }

    #header {
    width: 1020px;
    height: 100px;
    margin: left;
    overflow: hidden;
    }

    • コメントありがとうございます。

      配列してあるidやclassで違ってくるので何とも言えませんが、多分
      margin: 0 -600%;
      padding: 0 600%;
      の使用の仕方に問題があるのかも知れません。

  19. ピンバック: ヘッダー、フッターをブラウザ幅いっぱいにする方法 | keiichinakagawa

con にコメントする コメントをキャンセル

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です


*