結構色んなサイトで見かけるんですが、「width: 100%」とかで可変幅のヘッダとかになっているデザインがよく崩れている現象。

具体的にはどういう現象かと言うのは以下の通り。

まず、前提として仮にコンテンツの最小幅を900pxとする。ヘッダは100%等のブラウザの幅によって可変となり、コンテンツは常にセンタリングされていながら、ヘッダだけブラウザの幅が広がるにつれてドンドン広がる感じになっているデザインを考える。

CSSである程度レイアウト的なことができる人なら大体想像は付くと思う。で、そんなサイトをブラウザ幅800pxで開くとどうなるかによって崩れているかどうかを判断する。

私が指す「崩れている」とはこの場合にヘッダの背景色又は背景画像が800pxまでしか表示されない状態。スクロールするとヘッダの背景色or背景画像が切れてしまいます。

まぁ、当然の結果ですよね。100%が指定されているのだから。コンテンツは900pxもあるのだから、100px足りないですよね。

という訳で、いよいよこの現象を約１分で直します！

直す方法は、とっても簡単。「スタイルシート（styles.css）」のテンプレートを開いて、以下のコードを追記するだけ。

#container {min-width: 940px;}
#footer-inner {padding: 0;}

「なんでコレで約１分なんだ？」と思われた方も多いかもしれません。

MTの管理画面の重さとか、再構築にかかる時間とかをテキトウに考慮しただけです（笑

再構築の時間はエントリー数等、依存する様々な要因が考えられますが、細かいことは気にしない方向で。

ちなみに、MTの管理画面も同様の原因で崩れているし、プロフェッショナルウェブサイトのデフォルトスタイルに限ったことではない。

しかし、IEでは再現しなかった気がするので、MTの開発者はIEでしか表示確認していないと思われる。コレはまぁ、問題ないというか仕方がないと思う。でも、スタイルはどうだろうか？デザイン的な要素なので、例えデザイナーでなくとも複数のブラウザでの見栄えを気にするべきだと思うけど...。

とりあえず、「min-widthプロパティ」がミソな訳ですが、これを入れていない人が多すぎる。IE（6まで？）が対応していないからなのかも知れませんが、他のブラウザには必要な指定です。

たとえ画面解像度が全体的に上がっているとはいえ、全てのユーザが常にブラウザを最大化しているということはないと思います。最大化しているか、適当なサイズにしているかは、個人的には半々くらいではないかと思っています。

なので、こういうデザインにする時は気をつけた方が良いと思います。プロフェッショナルを名乗る方々は特に。