ヘッダーやフッターなどがブラウザの横幅いっぱいに広がっているウェブサイトをよく見ると思います。そういった表現を実現しようという趣旨です。スタイルシートを活用して、画面いっぱいに広げたいと思います。 以前、どのような考え方でCSSを変更し横を画面いっぱいに広げればいいのかということをまとめたのですが、実はある問題が発生していました。 問題)レスポンシブデザインに対応できなくなった Twenty Elevenはもともとレスポンシブデザインになっていました(レスポンシブデザインって何? という場合は、ググってみてください)。しかし、横幅いっぱいにヘッダーやフッターを広げると、なぜかレスポンシブデザインではなくなってしまったのです。iPhone で確認すると、サイトは単純に縮小されたように表示され、第一印象では「小さすぎて何が書かれているか分からない……」という感じです。なのでタップして拡大しない
![【続】横幅いっぱいのヘッダーやフッターにするCSSテクニック – PresentNote](https://cdn-ak-scissors.b.st-hatena.com/image/square/24b465ff86a10c6ce49c1ddf17738ebf627dffb5/height=288;version=1;width=512/https%3A%2F%2Fpresentnote.com%2Fwp-content%2Fuploads%2F2013%2F01%2Fwiden-responsible-ok.png)