[CSS] 両端に余白があるコンテナをページの中央に配置する古い実装方法と最近の実装方法

Post on:2019年6月4日

最近のWebでよく見かけるレイアウト

あなたはWebページの実装に取り組んでいます。レイアウトには端から端まで水平方向に伸びるbackground-colorがあるため、全幅のコンテナ要素が必要です。ただし、内部のコンテンツは両端に空白があり、中央に配置されています。

このレイアウトを実装するポイントは、

幅を制御する（大画面用）
両端に詰め物を加える
コンテンツを中央に配置する

これはWebレイアウトの「the inside problem」と呼ばれる内側要素の実装方法です。難しいことではありませんが、考慮すべき事項がたくさんあります。

The "inside" issue. Centered, max-width/padding containers inside full-width color bands.

What's your favorite pattern?

(Just a fun every day thing with many possible solutions to consider!) pic.twitter.com/pNYf5YsQMp

— Chris Coyier (@chriscoyier) 2019年3月14日

古典的な解決策: 外側と内側のコンテナ

親要素は当然それ自身の親と同じ幅であり、body要素またはブラウザの幅全体であると仮定しましょう。background-colorを定義し、両端に詰め物を加えます。これにより内側の要素は幅が制限され、中央に配置されます。

<footer>
  <div class="inside">
    コンテンツ
  </div>
</footer>

コンテンツ

</div>

</footer>

CSSは、下記の通りです。

footer {
  --contentWidth: 400px;
  background: lightcoral;
  padding: 2rem 1rem;
}

.inside {
  max-width: var(--contentWidth);
  margin: 0 auto;
}

footer {

--contentWidth: 400px;

background: lightcoral;

padding: 2rem 1rem;

}

.inside {

max-width: var(--contentWidth);

margin: 0 auto;

}

これは最初に思い浮かぶ方法だと思います。特別なテクニックは何も使用せず、簡単なコードです。しかし、この.inside要素を使った実装は望ましくありません。このパターンが使用される度にマークアップに追加しなければならず、他にもいくつかの欠点を備えています。

See the Pen
Classic "inside" element by Chris Coyier (@chriscoyier)
on CodePen.

単一の要素だけの場合

前述の実装は私のお気に入りではありません。なぜなら、健全なプロジェクトであれば、デザイナーやデベロッパーは最終的なHTML、CSS、JavaScriptの出力を、可能な限り最適な仕事をするために必要なあらゆる種類のコントロールを持つことができるからです。時にはあなたが制作者として微妙な立場にいたり、古いCMSの問題などを抱えていることがあります。

使用する要素が一つだけであれば、paddingを使うのが簡単です。HTMLを見てましょう、要素は一つだけです。

<footer>
  コンテンツ
</footer>

コンテンツ

</footer>

親要素のpaddingに、calc()を使用してコンテンツの最大幅の半分を100%から引きます。

footer {
  --contentWidth: 600px;
  
  background: lightcoral;
  padding: 2rem calc((100% - var(--contentWidth)) / 2);
}

footer {

--contentWidth: 600px;

background: lightcoral;

padding: 2rem calc((100% - var(--contentWidth)) / 2);

}

下記のようになります。

See the Pen
Single Element max-width in background-color by Chris Coyier (@chriscoyier)
on CodePen.

この実装の問題点はエッジタッチを防ぐことができないことで、これは受け入れられないものになるかもしれません。おそらくあなたは内部の要素（パラグラフなど）を選択し、（footer > *のようなセレクタで）paddingを加えるでしょう。エッジに触れないようにするためにbody要素にpaddingを加えるのは魅力的ですが、両端の背景が必要なためこの実装はうまくいきません。

コントロールが可能なコンテナがある場合

full-widthのテクニックがあります。これは、どんな幅でも中央にコンテナを配置できます。

.full-width {
  width: 100vw;
  margin-left: 50%;
  transform: translateX(-50%);
}

.full-width {

width: 100vw;

margin-left: 50%;

transform: translateX(-50%);

}

しかし、このテクニックは同様に内側も全幅します。そのため、あなたはもう一度内側の要素に取り組む必要があります。

See the Pen
Full width element with inside element by Chris Coyier (@chriscoyier)
on CodePen.

また、縦にスクロールバーがあると、width: 100vw;は水平スクロールバーを表示します。この不要なスクロールバーを取り除くには、以下のCSSを加えます。

body { overflow-x: hidden; }

1	body { overflow-x: hidden; }

overflow-x: hidden;が使用できない場合は、スクロールバーに明示的な幅を設定して、100vwからその幅の値を引きます。

body {
  scrollbar-width: 20px; /* スクロールバーの幅を定義 */
}

body::-webkit-scrollbar { /* Webkit用 */
  width: 20px;
}

.full-width {
  width: calc(100vw - 20px);
}