ここ数年、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イメージの作成とプロジェクト全体のワンクリックパッケージングとデプロイ
MySQL をインストールするための前提条件: CentOS 7 64 ビットをインストールし、Ce...
アレイの重複排除は、通常、就職面接中に遭遇し、アレイの重複排除方法のコードを手動で記述することが求め...
次のコマンドを使用してコンテナを作成し、ローカルの /home/dock/Downloads ディレ...
【コンテンツ】: 1.背景画像のグラデーションスタイルを使用する2. スケールを使ってズームできる...
HTML ページでは、ボタンやテキスト ボックスなどの視覚要素にフォーカスを設定したり、フォーカスを...
Vue $http get および post リクエストのクロスドメイン問題まずconfig/ind...
検索ページ: search.wxml ページ: <view class="form&...
序文Nginx (「エンジン エックス」と発音) は、リバース プロキシ、ロード バランサ、HTTP...
説明する: Windows 10 に VM をインストールし、VM で Docker を実行し、Do...
目次序文クロージャの紹介メモリのゴミを識別する方法クロージャのメモリ表現結論序文クロージャは、Jav...
序文要件を満たす特定のデータをデータベースから取得する必要があります。Select ABC FROM...
Linux での Tomcat の起動とシャットダウンLinux システムでは、コマンド操作を使用し...
1. Oracle は大規模データベースですが、MySQL は小規模から中規模のデータベースです。O...
1. Dockerネットワークモードdocker run が Docker コンテナを作成するときに...
任意のテキスト エディターを開き、次のコードをコピーして、たとえば SomeFilename.htm...