ここ数年、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イメージの作成とプロジェクト全体のワンクリックパッケージングとデプロイ
序文CSS がフロントエンド開発の基本的なスキルであるならば、「セレクター」は基礎中の基礎です。これ...
目的: ステーションAをステーションBのセカンダリディレクトリとして扱うのように: http://w...
Linuxでユーザーが所属するグループを変更する1. ユーザーのグループを設定する usermod ...
ドキュメントはしばらく前から書いていましたが、アップロードする勇気がありませんでした。サーバーのセキ...
01. コマンドの概要Linux には充実したヘルプ マニュアルが用意されています。コマンドのパラメ...
個々のウェブマスターにとって、自分のウェブサイトをいかにユニークで個性あふれるものにするかは、常に絶...
1. テストテーブルを作成する テーブル `testsign` を作成します ( `userid`...
MySQL のロックロックは、並行環境におけるリソースの競合を解決する手段です。その中でも、楽観的並...
なぜprettierを使うのですか?大企業では、フロントエンド開発コードに独自のコード標準がある場合...
1. カスタムフックとは何かロジックの再利用簡単に言えば、カスタム フックを使用すると、特定のコンポ...
この記事では、期間限定フラッシュセール機能を実装するためのJavaScriptの具体的なコードを参考...
6つの効果実装コードhtml <h1>CSS 境界遷移</h1> <セ...
ネイティブJavaScriptでスキニングを実装するための具体的なコードは参考までに。具体的な内容は...
Alibaba Cloud Diskの最後のアップデートからかなり時間が経ちました。ネットユーザー...
同時操作によるデータの重複を避けるために、データベースを操作するときにストアドプロシージャを使用して...