CSSレイアウト:固定、ゴム、弾性。 長所と短所

注: 「CSS Layouts:The Fixed。」の記事の翻訳 流体。 エラスティック。」レイアウトという用語のロシア語の類似物として、 レイアウトが使用されます。 この記事では2種類の「ゴム」レイアウトについて説明しているため、そのうちの1つは区別のために「弾性」とマークされています(弾性、貴重なコメントはMTonlyに感謝します )。 著者は、考慮される各レイアウト(レイアウト方法)の主な長所と短所を要約しています。



どのレイアウトレイアウト(カスケードスタイルシート、CSSを使用)が最適と見なされますか? それらにはそれぞれ独自のハック( )と独自の長所と短所があります。 そのうちの1つは、他の誰よりもユーザーフレンドリーになりますか? どれくらい簡単ですか? それぞれにどのような問題があり、どのように回避するのですか? そのうちの1つは他のものよりも構成が簡単ですか? その中に完全に不適切な欠陥品はありますか? ほとんどの場合、多くの人がこれらの質問に明確に答えますが、私はそんなに急いでいません。 私はこれらのレイアウトのそれぞれが好きです、そして、あなたが賢明にそれをするならば、それぞれは何らかの方法で適用できます、そして、ユーザーのすべてのカテゴリーのために使いやすさと同等のアクセシビリティを注意深くチェックしてください。 それらはすべて、Webサイトのプレゼンテーション層の一部であるため、ほとんどのアクセシビリティの問題は、セマンティクスと一般的なレイアウトルールの正しい使用に起因します。 次に、 固定の固定 、適応性のある流体、および拡張可能な弾性レイアウトの私の見解を説明します。



固定幅レイアウト





固定幅のサイトレイアウトは、メインコンテンツ領域( wrapper )で異なり、ユーザーエージェント画面の解像度に関係なく、その幅は変更されない値に設定されます。 最も一般的で妥当なのは760ピクセルの幅です。解像度が800×600のモニターのユーザーは、追加の水平スクロールに頼ることなく、サイトのメインコンテンツを画面のほぼ全幅で見ることができます。



著者のブログはそのようなレイアウトの例ですが、現在の画像を変更せずに簡単にゴムまたは伸縮性のあるレイアウトにすることができます。



このレイアウトの利点








All Articles