見た目上の横幅とブラウザで確保される有効幅について
細かすぎて伝わらないCSSシリーズ01『見た目上の横幅とブラウザで確保される有効幅について』です。
サイトの横幅には『見た目上の横幅』と『ブラウザで確保される有効幅』の２つの捉え方があります。絵として認識できる視覚的な幅、そしてCSSで指定するブラウザが固定幅として確保する幅です。
細かすぎて伝わりにくいので実例を挙げて行きます。
このサイトの横幅設定の例
今ご覧頂いているこのサイトを、横スクロールバーの出ないくらいまでブラウザのウィンドウサイズを広げてみて下さい。白い背景枠の幅は940pxです。
次にウィンドウの幅を徐々に狭めてみてください。940pxである白い背景枠が画面外に隠れる時点では横スクロールバーは出ません。
そのもう少し狭い幅（ちょうどヘッダイメージの幅）を起点に横スクロールバーが現われると思います。横スクロールバー出現の幅は920px。
つまり、見た目上940pxでデザインしているが、ブラウザで確保される有効幅は920pxだということです。
なぜ見た目上の幅とCSS指定幅を変えるか
例えば、このデザインのPhotoshopデータを何人かのコーダーに渡したとしたら、940pxでコーディングする人もいれば920pxでコーディングする人もいると思います。繰り返し処理できないヘッダのサイドシャドウの処理に困って960pxくらいでコーディングしてしまう人もいるかもしれません。
なぜ私が920pxでコーディングしたかというと、白い背景枠（シアンとマゼンタの差の部分）は「消えてしまっても構わない装飾」だからです。正確にいうと「デザインとしては見て欲しいけれども最悪の場合、優先すべきは閲覧者のモニタスペースよ」という所。
920pxという数字は一番最初に仕様として決めたものであり、幅を確保する要素は920px以内に納めながら、それ以上の幅を使って確信犯的に920pxよりはみ出してデザインを作成します。
（もちろんこのサイトの場合、コンテンツ部分が有効幅から更にマージンをとっているデザインだから言える事であり、もしサイドのラインを全て揃えるデザインにしたい場合はブラウザが狭まった時の読みやすさ事を考えて940pxでコーディングした方がよいかもしれません。）
この考え方をしない場合の例
逆説的な見本としてちょうどいいサイトがありました。
http://www.kobayashi.co.jp/
両サイドのシャドウはデザインとしては素敵ですが、それの為に片側で35px、合計70pxを有効幅として計上してしまっています。必要な部分のデザインは900pxながらも、コーディングで970pxになってしまったという例です。
ミニマムに収めるなら900px、コンテンツが両端ツライチまで来ていることを考慮しても片側10pxで合計920pxくらいでコーディングすると、横スクロールバーが出現する確立は減るかもしれません。
横スクロールバーを出してまで幅を確保する必要があるかを考える
細かすぎて伝わりづらいと思いますが、簡単に言うと「別に横スクロールバーを出してまで幅を確保して見せる必要の無い部分は、固定幅に含まない方がいい」という事です。
「特に意味のない要素（例えばコンテンツ枠から派生するシャドウの末端）を有効幅に含めるのは場所がもったいない」逆に言うと「仕様としてブラウザ有効幅の指定があったとしても、デザイン要素を全てその中で展開する必要はない」ということです。
仕様としての想定ユーザー環境から算出した幅を指定されたとしても、例えばシャドウや広がりを見せる背景装飾などはコーディングの際の有効幅の指定の仕方を工夫すればより自由にできます。
またディレクターの立場としても、見える物全てを指定する幅で収めて欲しいのか、有効幅として必要なコンテンツが収めてあればよいのか、ということで限られたスペースをより有効に使う為の細かい指示ができます。
CSSのTipsではなく、共通認識が必要な言葉の定義
この辺の話を仕様段階から定義するには、まず「幅」についての定義を共有する必要があります。
上の小林製薬さんの例でいうと、もし仕様として970pxが設定されていたのならコンテンツ幅をもっと大きく扱うことができたかもしれません。もし900pxが設定されていたとしたら、コーディング段階で破綻してしまったことになります。
これらの認識違いによる無駄なやり取りをなくし、たとえ10pxであってもユーザーのモニタースペースをセーブできるといいのかなと思います。
以上、細かすぎて伝わらないCSS第1回『見た目上の横幅とブラウザで確保される有効幅』でした。
Posted on 2009/07/06細かすぎて伝わらないCSS
2 Comments
-
-
Takeshi | Posted on 2009/07/10
細かすぎてどうでいいという意見もありそうです（笑）
でもCSSハックに詳しいとかソースが綺麗とかよりも、こういう部分に「おっ」と思ってしまうこの頃です。
こ、細かいなぁホントに！ これ同業者じゃないと伝わらないよなぁｗ けど普段あまり気にしない事に気づかせてくれる良記事だね。