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 バックスラッシュを削除する例

推薦する

CSS3 疑似クラスセレクターの簡単なレビュー

序文CSS がフロントエンド開発の基本的なスキルであるならば、「セレクター」は基礎中の基礎です。これ...

IIS7 IIS8 リバースプロキシルールの記述、インストール、構成方法

目的: ステーションAをステーションBのセカンダリディレクトリとして扱うのように: http://w...

Linuxでユーザーが所属するグループを変更する方法

Linuxでユーザーが所属するグループを変更する1. ユーザーのグループを設定する usermod ...

Win2008 サーバー セキュリティ チェック手順ガイド (日常のメンテナンス手順)

ドキュメントはしばらく前から書いていましたが、アップロードする勇気がありませんでした。サーバーのセキ...

Linux manコマンドの具体的な使い方

01. コマンドの概要Linux には充実したヘルプ マニュアルが用意されています。コマンドのパラメ...

ウェブサイトのBGM実装方法

個々のウェブマスターにとって、自分のウェブサイトをいかにユニークで個性あふれるものにするかは、常に絶...

MYSQLは継続サインイン機能を実装しており、サインイン後1日経過すると最初から開始します(SQL文)

1. テストテーブルを作成する テーブル `testsign` を作成します ( `userid`...

MySQL ロック関連知識のまとめ

MySQL のロックロックは、並行環境におけるリソースの競合を解決する手段です。その中でも、楽観的並...

vscode で Prettier Code プラグインを使用する詳細なチュートリアル

なぜprettierを使うのですか?大企業では、フロントエンド開発コードに独自のコード標準がある場合...

Reactでカスタムフックを作成する方法を教えます

1. カスタムフックとは何かロジックの再利用簡単に言えば、カスタム フックを使用すると、特定のコンポ...

期間限定フラッシュセール機能を実現するJavaScriptタイマー

この記事では、期間限定フラッシュセール機能を実装するためのJavaScriptの具体的なコードを参考...

CSS3で実装された6つの境界遷移効果

6つの効果実装コードhtml <h1>CSS 境界遷移</h1> <セ...

スキニングを実現するネイティブJavaScript

ネイティブJavaScriptでスキニングを実装するための具体的なコードは参考までに。具体的な内容は...

Mybatis+mysqlはストアドプロシージャを使用してシリアル番号実装コードを生成します。

同時操作によるデータの重複を避けるために、データベースを操作するときにストアドプロシージャを使用して...