「内部」の問題

この記事では、中心にある限られた幅のコンテンツを備えた全幅のコンテナを作成するためのさまざまなCSS技術を調査します。これは、共通のレイアウトチャレンジです。著者は、「内部の問題」（全幅の背景内の中心のコンテンツ）を強調し、それぞれに長所と短所を備えたいくつかのソリューションを提供します。

古典的な2コンテナーアプローチ：

最も単純な方法には、ネストされたdivが含まれます。<div> ）背景の色とパディングを設定し、 <code>max-widthとマージンを持つ内側のdiv （ .inside ）を設定しますmargin: 0 auto;コンテンツを中心にします。これは簡単ですが、追加のマークアップが必要です。

シングルエレメントソリューション（ calc()を使用）：

HTMLを単一の要素に制限する状況では、 calc()パディングを動的に計算してコンテンツを中央に配置できます。ただし、このアプローチは、コンテンツのサイズに応じて、コンテンツがエッジに触れることを完全に妨げない場合があります。

制御不能な容器から抜け出す：

既存の、変更でき.full-widthコンテナ内で作業する場合、 width: 100vw; 、 margin-left: 50%; 、およびtransform: translateX(-50%);全幅の要素を作成できます。ただし、コンテンツがビューポートよりも高い場合、これは水平スクロールバーを引き起こす可能性があります。回避策には、体にオーバーフローXを隠すか、 100vwからスクロール幅を計算して減算することが含まれます。

負のマージンとパディング：

オーバーフローXを親に隠すことができる場合、極端な負のマージンとポジティブパディングを使用した手法は、純粋に古い学校のCSSソリューションを提供します。

CSSグリッドとフレックスボックス：

技術的には可能ですが、この特定のタスクにCSSグリッドまたはFlexBoxを使用することは、一般に過剰になりすぎており、これらのレイアウトがすでに使用されていない限り、不必要な複雑さを追加します。

エッジを偽造する：

最後に、この記事は、ボックスシャドウや擬似要素などのテクニックを使用して、全幅の背景を「偽造」することを提案し、真に完全な容器の必要性を回避します。このアプローチは柔軟性を提供し、他の方法の制限の一部を回避します。著者は、これらの手法の詳細については、追加のリソースを指摘しています。