html - すべての CSS レイアウトで #container、#Wrapper を使用すると便利ですか?

Question

#container、#Wrapperすべての CSS レイアウトにコード全体を追加すると便利ですか? このおまけがないとレイアウトできないのdiv？このエクストラを使用する長所と短所は何divですか?

それは良い習慣ですか？どのタイプのデザイン/レイアウトにも役立ちますか? 意味的に正しいですか？

Answer 1

すべての CSS レイアウトで #container、#Wrapper にコード全体を追加すると便利ですか?

すべてのレイアウトが同じでない限り、すべてのレイアウトで必要になるわけではなく、ラッパー/コンテナーが必要な場合にのみ必要です。

この余分な div なしでレイアウトを作成することはできませんか?

はい、追加のラッパー div を省略できる場合もあります。

この余分な div を使用することの長所と短所は何ですか?

それはあなたのレイアウトに完全に依存します。多くの場合、幅が中央に固定されたデザインでは、ラッパーが最も理にかなっています。タグのスタイルを設定することもできますがbody、実装によっては、オーバーレイやその他の要素の外観が異なったり、画面全体に表示されなかったりする場合があります。

それは良い習慣ですか？

はい。ただし、レイアウトで必要な場合のみ。

どのタイプのデザイン/レイアウトにも役立ちますか?

通常、固定幅で中央揃えのレイアウトを行う必要がある場合に便利です。それが役立つ他の用途がわからない。

意味的に正しいですか？

本当にbody完全に良いのでcontainer、wrapper別のものを追加するのは冗長です。ただし、必要なブラウザのサポートや必要なレイアウトに応じて、多くの設計では必要悪です。プロジェクトやレイアウトに適している場合は、気にせずに使用してください。

Answer 2

ページ全体にコンテナ div を配置すると、特定の状況で役立ちます。たとえば、すべてを中央に配置したい場合はmargin: 0 auto;、コンテナ div を配置するだけで完了です。そうは言っても、すべてのタイプのレイアウトに必須でも有用でもないことは確かです。

意味上の正確さに関しては、確かに、divの唯一の直接の子としてa を持つことbodyは絶対に問題ありません。divタグ自体には意味的な意味はありません。タグが導入されたまさにその理由は、意味的なタグを誤用することなくレイアウトを実行できるようにするためでした。

Answer 3

<div id="container"><div id="Wrapper">STUFF</div></div> があれば、きっと簡単にできます。<div class="container"><div class="Wrapper"> のように id をクラスに変更してから、スタイルで #container を .container に、#Wrapper を .Wrapper に変更してみてください。

それでも機能する場合は、スタイルを組み合わせて内側の div を削除できます。それが難しすぎる (編集するにはスタイルが多すぎる) 場合は、単一の div でクラスを結合するだけです: <div class="container Wrapper">STUFF</div>。