新しいドキュメントで最初に書く HTML のビットが、ページ上の他のすべてを包む要素になることがあります。 ラッパーという用語はそのためによく使われます。 私たちはそれにクラスを与え、そのクラスはページ上のすべての視覚的な要素をカプセル化する責任を持ちます。
私はいつも、それを実装する最良の方法と格闘してきました。 StackOverflow で 250,000 以上のビューを持つ関連スレッドを見つけたので、明らかに私だけが悩んでいるわけではありません!
この記事に飛び込む前に、まず「ラッパー」と「コンテナー」の違いを調べてみましょう。
“Wrapper” vs “Container”
ラッパーとコンテナー要素には違いがあると思います。
プログラミング言語では、コンテナーというと、複数の要素を格納できる構造体に使われることが一般的です。
ですから、私の意見では、異なる機能を意図しているので、2 つの異なる名前を持つことは理にかなっています。
ラッパーといえば、ドキュメントの HTML の残りのすべてを含む <div> を考えるのが一般的でしょう。 それを幅960pxに設定して、メインのコンテンツを全てセンター揃えで表示する、という生活をしたことがある人は多いのではないでしょうか。
一方、コンテナーは、通常、別の種類の封じ込めを意図しています。 複数のコンポーネントの動作やスタイルを実装するために時々必要となるものです。 それは、意味的にも視覚的にも、要素をグループ化する目的を果たします。
ラッパーとコンテナーという用語は、開発者とその意図に応じて、同じものを意味することもあります。
ラッパーとコンテナーという用語も、開発者とその意図によって同じ意味になります。 しかし、名前付けは開発者の活動において最も基本的で重要な部分の一つであることを忘れないでください。 命名規則はコードをより読みやすく、予測可能なものにします。 慎重に選択してください！
以下は一般的なページ ラッパーの例です:
/** * 1. Centers the content. Yes, it's a bit opinionated. * 2. See the "width vs max-width" section * 3. See the "Additional Padding" section */.wrapper { margin-right: auto; /* 1 */ margin-left: auto; /* 1 */ max-width: 960px; /* 2 */ padding-right: 10px; /* 3 */ padding-left: 10px; /* 3 */}width vs max-width
ブロック レベル要素の width 設定により、そのコンテナの端まで広がるのを防ぐ（読みやすい行長などのために良い）ことができます。 従って、ラッパー要素は指定された幅を取ります。 問題は、ブラウザ・ウィンドウがラッパーの特定の幅よりも狭い場合に発生します。
代わりに max-width を使用すると、この状況で、狭いブラウザ ウィンドウのためにより良いです。 これは、小さなデバイスでサイトを使用できるようにする場合に重要です。
Pen CSS-Tricksを参照してください。 The Best Way to Implement a CSS Wrapper by Kaloyan Kosev (@superKalo) on CodePen.
応答性の観点からは、max-width がより良い選択です！
Additional Padding
私は多くの開発者が、ある特定のエッジケースを忘れているのを目にしてきました。 たとえば、max-width を 980px に設定したラッパーがあるとします。 このエッジケースは、ユーザーのデバイスの画面幅がちょうど980pxのときに表示されます。
端に少しパディングしたい場合が多いのですが、それは可能ですか
?
.wrapper { max-width: 960px; /* 20px smaller, to fit the paddings on the sides */ padding-right: 10px; padding-left: 10px; /* ... */}ですから、padding-leftpadding-right をラッパーに追加すると、特にモバイルで良いアイデアかもしれない理由なんですよ。
あるいは、パディングが全体の幅をまったく変えないように、ボックス サイズの使用を検討してください。
選択すべき HTML 要素
ラッパーにはセマンティックな意味はありません。 単にページ上のすべての視覚的な要素やコンテンツを保持するだけです。 それは単なる一般的なコンテナです。 セマンティックの面では、<div> が最良の選択です。
<div> にも意味的な意味はなく、ただの汎用コンテナです。
もしかしたら <section> 要素がこの目的に合うかもしれない、と思うかもしれませんね。
<section>要素は、一般的なコンテナ要素ではありません。 スタイル付けのためだけ、あるいはスクリプトの便宜のために要素が必要な場合、作者は代わりに div 要素を使うことが推奨されます。
<section>要素はそれ自身のセマンティクスを運びます。 これは、コンテンツのテーマ別のグループ化を表します。
セクションの例としては、章、タブ付きダイアログ・ボックスの様々なタブ・ページ、論文の番号付けされたセクションなどが挙げられます。
一見すると、あまり明白ではないかもしれませんが、そうなのです!
<body><div><div><>
ラッパーとして <body> 要素を使用できる場合があることは言及する価値があります。
body { margin-right: auto; margin-left: auto; max-width: 960px; padding-right: 10px; padding-left: 10px;}そして、不要なラッパー <div> をこの方法で削除できるため、マークアップの要素が 1 つ少なくなります。
しかしながら、柔軟性と変更への耐性の観点から、これはお勧めしません。
- フッターをドキュメントの最後 (ドキュメントが短い場合はビューポートの下部) に「貼り付ける」必要があります。 それを行う最も現代的な方法であるフレックスボックスを使用できたとしても、追加のラッパー
<div>が必要です。 - ページ全体の
background-color<body><html>要素にすでに背景が設定されていなければ、設定されたように動作します。 CSSの不思議なところです。 しかし、<html>要素がすでに背景を持っていて、body に他のものを設定し、body に何らかの間隔制約がある場合、背景は奇妙なことになります。
私は、CSS ラッパーを実装するために追加の <div> を持つことは、依然としてベスト プラクティスであると結論付けます。 この方法では、後で仕様要件が変更された場合でも、ラッパーを後で追加してスタイルを移動することに対処する必要はありません。 結局のところ、私たちは 1 つの余分な DOM 要素について話しているだけなのです。