[CSS]悩む人も多い、要素を内包するラッパーの最適な実装テクニック

Post on:2017年8月24日

Wrapper vs Container -ラッパーとコンテナ

私はラッパー（wrapper）とコンテナ（container）要素は別物だと思います。

プログラミング言語では一般的に、コンテナは複数の要素を含むことができる構造に使用されます。ラッパーは単一のオブジェクトの周りを包み込み、より多くの機能とインターフェースを提供するものです。

これら2つは異なる機能を意図しているため、それぞれ異なる名前を持つことは理にかなっています。

ラッパーと言えば、HTMLでドキュメントの残りのすべてを包み込む<div>を思い浮かべるのが一般的です。わたし達の多くは幅を960pxに設定し、すべてのメインコンテンツを整列させてきたと確信しています。また、ラッパーはフッタをスティッキーで配置するような時にも使用されます。
参考: Sticky Footer, Five Ways

その一方でコンテナは、別の種類の閉じ込めを意図しています。1つは、複数のコンポーネントの振る舞いやスタイリングを実装するために必要なものです。これは、要素を意味的にも視覚的にもグループ化する目的を果たします。
例として、Bootstrapではグリッドシステムを収容するために、また他のさまざまなコンポーネントを含む「コンテナのクラス」が用意されています。
参考: Bootstrapのコンテナ

ラッパーとコンテナという用語は制作者とそれらの意図に応じて、同じことを意味する場合もあります。同様に、他の取り決めがあるかもしれません。そのため、最も良いアドバイスは通常あなたに最も適したものを採用することです。しかし、用語の命名は制作者にとって最も基本的で、重要なものの1つです。命名規則は、コードをより読みやすく、予測可能にします。慎重に定義してください！

一般的なページのラッパーの例を見てましょう。

/**
 * 1. コンテンツを中央に配置します。
 * 2. 「width vs max-width」を参照してください。
 * 3. 「Additional Padding」を参照してください。
 */
.wrapper {
  margin-right: auto; /* 1 */
  margin-left:  auto; /* 1 */

  max-width: 960px; /* 2 */

  padding-right: 10px; /* 3 */
  padding-left:  10px; /* 3 */
}

/**

* 1. コンテンツを中央に配置します。

* 2. 「width vs max-width」を参照してください。

* 3. 「Additional Padding」を参照してください。

.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

ブロックレベル要素の幅を設定すると、コンテナの端まで伸びないようになります（一行の長さを読みやすくするのに適しています）。それにより、ラッパー要素は指定された幅になります。問題は、ブラウザのウィンドウがラッパーに指定された幅よりも狭い場合に発生します。その際、望まれない水平のスクロールバーが表示されてしまいます。

widthで指定する代わりにmax-widthを使用すると、ブラウザのウィンドウが狭い場合でも問題は起こりません。このテクニックは、スマホのような小さいデバイスに対応する時に重要です。どのようになるか、下記で確認してみてください。
「CSS」のタブをクリックすると、widthとmax-widthで指定しているのが分かります。

See the Pen CSS-Tricks: The Best Way to Implement a CSS Wrapper by Kaloyan Kosev (@superKalo) on CodePen.

レスポンシブにおいて、max-widthはより良い選択肢と言えるでしょう。

Additional Padding -追加のpadding

制作者が特定の場合に、コンテンツの端の対応を忘れているのを見かけます。どういうことかと言うと、例えば、max-widthが980pxに設定されたラッパーがあるとします。ユーザーのスクリーンの幅がちょうど980pxの場合、コンテンツは端の余白がなく、ぴったりに表示されます。

コンテンツの余白がなくなってしまう

この問題を解決するには、端がぴったりにならないようにpaddingを加えます。
私はラッパーを980pxの合計幅で実装する必要がある場合は、下記のように記述します。

.wrapper {
  max-width: 960px; /* 20px小さく指定し、両脇にpaddingを加える */

  padding-right: 10px;
  padding-left: 10px;

  /* ...  */
}

.wrapper {

max-width: 960px; /* 20px小さく指定し、両脇にpaddingを加える */

padding-right: 10px;

padding-left: 10px;

/* ... */

}

ラッパーを使用する際に、左右にpaddingを加えることはスマホに対応する時に良いアイデアだと思います。

あるいはpaddingが全体の幅を変更しないように、box-sizingを使用してもよいでしょう。
参考: International box-sizing Awareness Day

どのHTML要素を使用するべきか

ラッパーにはセマンティックな意味はありません。内包したすべてのビジュアル要素とコンテンツを保持するだけです。単に、それは汎用のコンテナに過ぎません。
セマンティクに関しては、<div>が最適でしょう。<div>はセマンティックな意味を持たず、単なる汎用のコンテナです。

<section>要素がこの目的に適しているかどうか検討するかもしれません。しかし、W3Cの仕様では下記のように定義されています。

<section>要素は、汎用コンテナ要素ではありません。要素がスタイリング目的またはスクリプト作成のために必要な場合は、代わりにdiv要素を使用することを推奨します。一般的な規則は、要素の内容が文書のアウトラインに明示的にリストされる場合にのみsection要素が適切であるということです。
参考: Sections -HTML5

<section>要素は自身のセマンティクを持っています。それは、コンテンツのテーマ別グループ化を表します。セクション要素の子として見出し（h1-h6要素）を含めることによって、各セクションのテーマは識別される必要があります。

セクションの例は、章、タブ付きダイアログボックスのさまざまなタブ付きページ、論文の番号付きセクションが挙げられます。Webサイトのホームページは、紹介、ニュースのアイテム、連絡先情報のセクションに分けることができます。

一見、悩むかもしれませんが、ラッパーには<div>が最適です！

<body>タグを使用 vs <div>タグを追加

<body>要素をラッパーとして使用できる場合があります。下記のコードはうまく機能します。

body {
  margin-right: auto;
  margin-left:  auto;
  max-width: 960px;
  padding-right: 10px;
  padding-left:  10px;
}

body {

margin-right: auto;

margin-left: auto;

max-width: 960px;

padding-right: 10px;

padding-left: 10px;

}

上記では不要なラッパー<div>を削除することができるため、マークアップの要素が1つ少なくなります。

しかし、この方法は柔軟性と対応性に欠けるため、私はこれを推奨しません。プロジェクトの後半に次のようなシナリオが起こったとします。

ドキュメントの終わりにスティッキーのフッタを配置する必要があるとします（ドキュメントが短い場合は常にビューポートの下部に配置）。flexboxを使った最新の方法を使用できたとしても、追加のラッパー<div>が必要になります。
ページ全体の背景色を設定する必要があるとします。bodyタグにmax-widthがあるので、可能ではありません。しかし、<body>タグではなく、<html>タグに背景色を設定できます。HTMLに指定することは、私は一般的でないように思います。
参考: HTML vs Body in CSS

私は、ラッパーを実装するために<div>を追加することは、最良の方法であると結論づけています。要件が後で変更された場合でも、ラッパーを後で追加したり、スタイルを移動する必要はありません。
いろいろな面から検討してきましたが、結局のところ、わたし達は1つの余分なDOM要素について話しをしているだけなのです。