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

ページの端から端まで伸びる背景があり、コンテンツは両端に空白があり、中央に配置されています。ここ数年で増えてきたレイアウトです。

この内側のコンテナを実装するさまざまな方法、それぞれの利点と欠点、解決方法を紹介します。

サイトのキャプチャ

The “Inside” Problem


下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。

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

サイトのキャプチャ

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

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

  1. 幅を制御する(大画面用)
  2. 両端に詰め物を加える
  3. コンテンツを中央に配置する

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

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

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

CSSは、下記の通りです。

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

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

単一の要素だけの場合

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

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

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

下記のようになります。

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

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

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

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

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

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

しかし、このテクニックは縦にスクロールバーがないと、full-widthのコンテナは完全な全幅にはなりません。これはCSSが改良され、ビューポート単位の処理が改善されているのではないかと思います。

全幅コンテナを扱う方法は他にもいろいろあります。例えば余白のある端まで引っ張ります。しかし、それらはすべて最終的にビューポートユニットを必要とし、結果として同じスクロールバー関連に苦しんでいます。
参考: Full Width Containers in Limited Width Parents

親にoverflow-xを使用しなくてもいい場合

親にoverflow-xを使用しなくてもいい場合は、負のマージンと正のパディングで実装することができます。

このテクニックは新しいものを何も使わないという点で、少しクールです。使用するのはすべて、古くからあるCSSプロパティです。

CSS GridまたはFlexboxは役立ちますか?

あまり、役立ちません。

もちろん、3列のグリッドを設定して、コンテンツを中央の列に、外側の2つの列を余白として使用することができます。しかし、私はこれがCSS Gridの魅力的な使い方であるとは思いません、そして何のメリットもありません。

代わりに、端をフェイクする

background-colorが単一の連続した要素である必要はありません。例えば、box-shadowを疑似要素で使用して、偽の両端にすることができます。

sponsors

top of page

©2019 coliss