CSSレイアウトについて

• CSS Layouts: The Fixed. The Fluid. The Elastic. - Beast-Blog.com

最も良いCSSのレイアウトはどれでしょうか？どのレイアウトも、それぞれ特徴があり、賛否両論です。 もう1つ、他よりもアクセスしやすいですか？使いやすいですか？欠点は何で、その対処法は何ですか？作成しやすいですか？悪い、近付きがたいレイアウトはありますか？中には「はい」と答える人もいると思いますが、私は「はい」とは言いません。 もし使いやすさと等しいアクセスのしやすさが確保されるならば、どれも好ましく感じるからです。 それらは全てWebサイトの表現の1つであり、大部分のアクセスのしやすさを見出せる意味論と、根底にあるマークアップの適当な使用法に頼っています。 下記にて、固定されたFixedレイアウト、適合できるFluidレイアウト、拡張可能なElasticレイアウトについて説明します。

固定幅のレイアウト(Fixedレイアウト)

固定幅のサイトは、メイン画面がユーザエージェントの画面解像度に関わらず、特定の不動の幅に設定されます。 一般的に考慮される760ピクセルの幅は、画面解像度800 x 600ピクセルのユーザが、画面を最大化にして、横スクロールバーが出現しないで確実に閲覧できるサイズです。

既存のイメージを変えることなく、流動性もしくは弾力性があるように作られていますが、Beast-Blog.comは固定幅のサイトの例です。

固定幅の良いところ

• 主な読み込み可能な内容域は、最小の最大幅を設定することなく、表示領域を制御できます。
• 固定幅のレイアウトは、容易にあなたのスタイルに従い、適用できます。固定幅のビジュアルデザインは、合理的な仕方を達成できます。
• 上記の例に基づいた760ピクセル幅の典型的な内容域は、私の考えでは読みやすい最適な、理想的な幅です。

固定幅の悪いところ

• 線幅からテキストサイズへの比が、テキストリサイズと共に変化しないので、もしテキストサイズが大いに拡大されるなら、私の考える「最適な読みやすさのための理想的な幅」は損なわれてしまいます。とは言え、良いデザインでテキストが膨大である場合にのみ、この問題が発生することに注意してください。
• 小さいモニタ(640 x 480ピクセル)の人々は、幅が760ピクセルで固定されたサイトでは、横スクロールバーが出現してしまうでしょう。これは非常に稀な問題です。
• 幅が760ピクセルで固定されたサイトは、大きなスクリーン画面ではとても狭く見えてしまいます。
• 狭い幅は、カラムと内容を無理の無い数で制限できますが、これは実際にはプロであるかもしれません。強制緩和と考えます。

固定幅へいくつかのアドバイス

• モニタサイズが640 x 480ピクセルのユーザは、主要なコンテンツで、巻き物に面が必要ないように、あなたの固定幅のコンテンツを左側に置くでしょう。
• より小さい装置を収容するために、携帯用の小さなスタイルシートを必ず提供しましょう。また、映像やテレビのメディアタイプスタイルシートを提供することは、良いアイデアかもしれません。

固定幅の例

可変幅のレイアウト(Fluid or Liquidレイアウト)

可変幅レイアウトは、包装される幅をまったく指定しないか、パーセンテージなどの単位を用いることによって作成されます。言い換えれば、境界とものをねじで締める詰め物を除いて、幅が100%に指定されたサイトは、横スクロールバーを出現させずに、全体を表示することができるでしょう。

GrayBit.comは、可変幅のサイトの例です。スクロールバーを出現する前に、755ピクセル未満までリサイズしますが、この場合コンテンツにアクセスするのに、スクロールバーは必要ありません。実際、要素が重なったり、隠され始める560ピクセルまで、完全な状態で利用できます。大部分のFluidレイアウトには限界があり、スタイルが削除される、あるいは携帯用の小さなスタイルシートが提供されない限り、携帯端末では上手く実行されません。

可変幅の良いところ

• FluidやLiquidレイアウトは、ほとんどどのような幅にも、普遍的に順応します。それはあまり現実的ではありませんが、確実になるよう注意するならば、それは可能です。
• Fluidの幅は、それら全てを「純粋主義者」に従い制作するのに合っています。しかし、制作者の求める純粋さが、時々ユーザビリティの邪魔になったりすることがありませんか？ 私は多分そうだと思います。
• Fluidレイアウトは、大部分の利用可能な表示域を作ります。より多くの内容がabove-the-fold(ページが表示された時、スクロールせずに閲覧可能な領域のこと)になっているのが望ましいです。しかしながら…

可変幅の悪いところ

• あまりに多くの利用可能な内容と、余白をいっぱいにする強い願望は、時にユーザビリティを損なうかもしれません。また、あまりに多くの内容が、ユーザを混乱させ、サイトが混雑あるいは雑然としたイメージを与えるかもしれません。「余白は売れ」という表現があります。それはWebにも通用する正直な声明です。
• もし幅に制限のあるCSSのmax-width属性を使用しているとき、その属性がサポートされていない、Internet Explorer(IE) 6もしくはそれ以下を利用している場合、Fluidレイアウトの利点は供給されないので、あなたの純粋さを追求したレイアウトは、とても使い難いサイトになるでしょう。試しに1,000ピクセル以上でテキスト行を読んでみてください。そうすれば、あなたはその問題を目の当たりにするでしょう。

可変幅へいくつかのアドバイス

• 目的を持ってこのレイアウト方法を使用してください。「純粋さを求める」以外に理由がない場合は、使用しないでください。私は、これよりも良い理由がなければならないと思っています。もしあなたがFluidレイアウトを制作するならば、それが多種多様な表示ポートサイズに適合することを確認してください。他には…、何かありますかね？
• もしあなたがFluidレイアウトサイトを作っていて、固定幅のコンテンツがあるのなら、可変幅と固定幅レイアウトを混在させ、固定幅の部分、もしくは最も大きいオブジェクトに対して、最小サイズの範囲を定義してください。もしあなたがFluidレイアウトサイトを作るなら、本当にFluidの(流れる)ような、名ばかりのレイアウトでないことに注意してください。
• もしあなたが可変幅と固定幅が混在したレイアウトサイトを作るなら、とりあえずこのCSSチュートリアルをご覧になり、それが800 x 600ピクセルの表示ポートに適合することを確認してみてください。

可変幅の例