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

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 を応援していただければ幸いです。

<<:  Dockerイメージの作成とプロジェクト全体のワンクリックパッケージングとデプロイ

>>:  PHP で JSON バックスラッシュを削除する例

推薦する

CentOS7 64ビットインストールmysqlグラフィックチュートリアル

MySQL をインストールするための前提条件: CentOS 7 64 ビットをインストールし、Ce...

JavaScriptでよく使われる配列重複排除実戦ソースコード

アレイの重複排除は、通常、就職面接中に遭遇し、アレイの重複排除方法のコードを手動で記述することが求め...

dockerでマウントされたディレクトリが読み書きできない問題を解決する

次のコマンドを使用してコンテナを作成し、ローカルの /home/dock/Downloads ディレ...

CSS はモバイル互換性の問題を解決するために 0.5px の線を実装します (推奨)

【コンテンツ】: 1.背景画像のグラデーションスタイルを使用する2. スケールを使ってズームできる...

JavaScript の onblur および onfocus イベントの詳細な説明

HTML ページでは、ボタンやテキスト ボックスなどの視覚要素にフォーカスを設定したり、フォーカスを...

vue $http の get および post リクエストのクロスドメイン問題を解決する

Vue $http get および post リクエストのクロスドメイン問題まずconfig/ind...

Nginx プロキシを使用してフロントエンドのクロスドメイン問題を解決する方法

序文Nginx (「エンジン エックス」と発音) は、リバース プロキシ、ロード バランサ、HTTP...

docker pull imageエラーの問題を解決する

説明する: Windows 10 に VM をインストールし、VM で Docker を実行し、Do...

ブラウザがクロージャをどのように認識するかについて詳しく説明します

目次序文クロージャの紹介メモリのゴミを識別する方法クロージャのメモリ表現結論序文クロージャは、Jav...

MySQLクエリ文の実行プロセスを理解するための記事

序文要件を満たす特定のデータをデータベースから取得する必要があります。Select ABC FROM...

Linux で Tomcat を実行するいくつかの方法の説明

Linux での Tomcat の起動とシャットダウンLinux システムでは、コマンド操作を使用し...

MySQLとOracleの違いを簡単に説明してください

1. Oracle は大規模データベースですが、MySQL は小規模から中規模のデータベースです。O...

Dockerのネットワークモードと設定方法

1. Dockerネットワークモードdocker run が Docker コンテナを作成するときに...

IE をフリーズさせる HTML コード

任意のテキスト エディターを開き、次のコードをコピーして、たとえば SomeFilename.htm...