calc() で全画面背景の固定幅コンテンツを実現

ここ数年、Web デザインには「全幅背景と固定幅コンテンツ」というトレンドが生まれています。このデザインの典型的な特徴は次のとおりです。

ページには複数の大きなブロックが含まれており、各ブロックはビューポートの幅全体を占め、背景が異なります。

コンテンツは固定幅です。解像度によって幅が異なる場合でも、それはメディア クエリによってこの固定幅の値が変更されるだけです。場合によっては、異なるブロック内のコンテンツの幅も異なることがあります。

場合によっては、Web ページ全体が画面の背景全体を埋め尽くす固定幅のコンテンツであり、このスタイルの複数のブロックで構成されることがあります。ただし、多くの場合、ページの特定の領域のみがこのスタイルで設計されており、最も一般的なのはナビゲーションまたはフッターです。

このデザイン スタイルを実現するには、ブロックごとに 2 つの要素レイヤーを用意するのが最も一般的な方法です。外側のレイヤーはフルスクリーンの背景を実現するために使用され、内側のレイヤーは固定幅のコンテンツを実現するために使用されます。後者は margin: auto によって水平方向に中央揃えされます。たとえば、このデザインを使用するフッターの構造コードは通常、次のように記述されます。

<フッター>
<div class="wrapper">
<!-- フッターのコンテンツはここに表示されます-->
</div>
</フッター>

CSS を使用して、これらの 2 つの要素レイヤーを同時にスタイル設定します。

フッター {
背景: #333;
}
.ラッパー{
最大幅: 900px;
マージン: 1em 自動;
}

見覚えがあるでしょう？現在、ほとんどのフロントエンドエンジニアはこのように書いています。この効果を実現するには、要素のレイヤーを追加する必要がありますか?最新の CSS の助けを借りて、この混乱を完全に取り除くことはできるでしょうか?

まず、このシナリオで margin: auto がどのような役割を果たすかを考えてみましょう。この宣言によって作成される左余白と右余白は、実際にはビューポート幅の半分からコンテンツ幅の半分を引いた値に等しくなります。ここではパーセンテージはビューポートの幅に基づいて解釈されるため (祖先要素に明示的な幅がないことを前提とします)、このマージン値は 50% – 450 ピクセルとして表現できます。幸いなことに、CSS3 ではこのような calc() 関数が定義されているため、この簡単な式を使用して CSS でプロパティの値を直接指定できます。 auto の代わりに calc() を使用すると、この内部コンテナーのスタイルは次のようになります。

.ラッパー{
最大幅: 900px;
マージン: 1em calc(50% - 450px);
}

フッター内にコンテナ要素を追加する唯一の理由は、その余白に魔法の auto キーワードを割り当てて、コンテンツを水平方向に中央揃えにすることです。しかし、今ではこの魔法の auto を calc() に置き換えており、この新しい値は、長さの値を受け入れる任意のプロパティに汎用の CSS 長さ値として実際に適用できます。つまり、必要に応じて、この長さの値を親要素のパディングにも適用でき、全体的な効果は変わりません。

フッター {
最大幅: 900px;
パディング: 1em calc(50% - 450px);
背景: #333;
}
.ラッパー {}

この変換後、内部コンテナー上のすべての CSS コードが削除されました。つまり、実際にレイアウトに参加する必要はなく、構造コードから安全に削除できます。最終的に、純粋で冗長性のない HTML 構造で、望ましいデザイン スタイルを実現しました。このソリューションをさらに最適化する余地はありますか?それは正しい。卓越性の追求は終わりがないと信じなければなりません!

幅の宣言をコメントアウトすると、効果がないことがわかります。ビューポートのサイズに関係なく、視覚効果はまったく同じです。これはなぜでしょうか?パディングが 50% – 450 ピクセルの場合、コンテンツに使用できるスペースは 900 ピクセル (2×450 ピクセル) のみになります。幅を 900 ピクセル以外 (またはそれより大きい、または小さい) に明示的に設定した場合にのみ、違いを確認できます。必要なコンテンツの幅は 900 ピクセルなので、この宣言行は実際には冗長です。これを削除して、コードをより簡潔にすることができます。

最適化できるもう 1 つの領域は、フォールバック スタイルを追加して下位互換性を強化できることです。この方法により、ブラウザが calc() をサポートしていなくても、少なくとも比較的適切なパディングを得ることができます。

フッター {
パディング: 1em;
パディング: 1em calc(50% - 450px);
背景: #333;
}

ついに完成しました。冗長なタグを廃止し、3 行の CSS コードを費やして、柔軟なスタイル、簡潔なコード、優れた互換性という完璧な結果を最終的に達成しました。

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。