完璧な Web サイトレイアウトのための CSS ボックス モデルをマスターする方法 ( Codepen の例)

やあ、すごい人たちですね！私のブログへようこそ。 ?今日は、CSS ボックス モデルを深く掘り下げ、各要素のサイズがどのように決定されるか、そしてこの知識を使用して正確でモダンでクリーンなデザインを作成する方法を説明します (実際の例はこの記事の最後にあります)。

ボックスモデルの紹介

CSS ボックス モデルは Web デザインの基礎であり、Web ページ内の各 HTML 要素がどのようにスペースを占めるかを決定します。

ボックスモデルコンポーネントの詳細な内訳

1. コンテンツ : これはボックスの実際のコンテンツであり、テキスト、画像、その他の要素が配置されます。そのサイズは幅と高さのプロパティによって定義されます。

2. パディング : これは、境界線内のコンテンツの周囲のスペースです。別途スタイルを設定しない限り、パディングは透明です。

3. Border : パディングとコンテンツを囲みます。幅、スタイル (実線、破線など)、色を指定してスタイルを設定できます。

4. マージン : これは境界線の外側のスペースです。また、透明であり、要素間の間隔に影響します

実際のボックス モデル:

.example {
    width: 200px; /* Content width */
    height: 100px;
    padding: 10px; /* Adds 20px to both width and height */
    border: 5px solid #000; /* Adds 10px to both width and height */
    margin: 20px; /* Does not contribute to the element's dimensions but affects layout */
}

• 合計幅の計算 : 200px (コンテンツ) 20px (パディング) 10px (ボーダー) = 230px

• 総高さの計算 : 100px 20px 10px = 130px

よくある誤解

• 幅/高さはコンテンツにのみ影響します : 幅または高さの設定によって合計サイズが定義されると多くの人が想定していますが、それはコンテンツ領域のみです。

• ボックス サイズ : box-sizing: border-box を使用しない場合、パディングまたはボーダーを追加すると、設定された幅/高さを超えて要素が増加します。

ボックス モデルの視覚化: 上記の寸法のボックスがあると想像してください。視覚的な内訳は次のとおりです:

.box {
    background-color: #f0f0f0;
    width: 300px;
    height: 150px;
    padding: 20px;
    border: 10px solid #000;
    margin: 30px;
}

• コンテンツエリア : 300x150px (グレーのエリア)

• パディング : 周囲に 20 ピクセルを追加し、サイズを 340x190 ピクセルに増加します

• ボーダー : パディングを囲み、最終的なボックス サイズを 360x210px

にします。

• Margin : 境界線の周囲にスペースを作成しますが、要素の寸法には直接カウントされません。

高度なボックスモデルテクニック

Box-Sizing プロパティ : box-sizing: border-box を使用すると、指定された幅/高さにパディングとボーダーが含まれ、デザインが合理化されます:

* { box-sizing: border-box;}

この宣言はすべての要素に適用され、サイズの計算がより直感的に行われます。

• パーセンテージ値 : パディングまたはマージンとともに使用すると、パーセンテージは、含まれる要素の幅を基準にして計算されます。

• 自動マージン : マージンの設定: 要素を水平方向 (フレックスボックスを使用している場合は垂直方向) に自動で中央揃えできます。

ボックスのモデルとレイアウトに関する考慮事項

• フロート : フロートを含む要素は、マージンが崩れたり重なったりする予期しない動作を引き起こす可能性があります。

• フレックスボックスとグリッド : これらの最新のレイアウト方法では、マージンの処理方法が異なります。たとえば、フレックス コンテナーやグリッド セルでは、ブロック レベルの要素のようにマージンが折りたたまれません。

• 重複する要素 : Z インデックスと位置を理解すると、要素が重複する場合の深さを管理するのに役立ちます。

ボックス モデルを効果的に使用するためのヒント

• 一貫性を考慮した設計 : サイズ計算エラーを避けるために、プロジェクト全体で一貫したボックス サイズを使用します。

• レスポンシブ デザイン : パディングとマージンがどのように拡大縮小されるかを思い出してください。パディングのパーセンテージ値は、さまざまな画面サイズ間で比率を維持するのに役立ちます。

• デバッグ : 要素が予想より大きくまたは小さく見える場合は、パディング、境界線、マージンの設定を確認してください。

• アウトラインの使用 : 境界線とは異なり、アウトラインは要素の寸法に影響を与えないため、特定の UI デザインで役立ちます。

現実世界のアプリケーション

1.レスポンシブカードレイアウト / Codepen でコードを確認してください。

説明:

• Box-Sizing : ボックスのサイズ設定: border-box;パディングによって幅と高さの合計が増加しないようにすることで、レスポンシブ デザインが簡素化されます。

• カード レイアウト : .card クラスは、固定幅、丸い角、および深さの影を持つコンテナを定義します。

• カード画像 : 高さによって設定された寸法を持つ画像のプレースホルダーとして機能します。

• カード コンテンツ : ここでは、境界線からコンテンツの間隔を空けるためにパディングが使用されます。ここでは、ボックス モデルが実際に動作している様子を確認できます。パディングによりカード内のクリック可能な領域が増加しますが、カードの宣言された幅は増加しません。

• Margin : カード内の要素の間隔を空けるために、.card-title と .card-text で微妙に使用されます。

• ボタン : CSS 遷移を示すホバー効果を備えた、典型的な CTA のように見えるスタイルです。

2.簡単なブログ投稿リスト / Codepen でコードを確認してください。

この例について説明が必要な場合はお知らせください。コメントでご協力いただけると幸いです!

結論

CSS ボックス モデルは、理論的には単純ですが、Web レイアウトのデザインとデバッグの方法に影響を与える複雑な層を持っています。この概念を理解して習得することで、クリーンで予測可能でレスポンシブなデザインを作成するための準備が整います。

---

?こんにちは、私はエレフテリアです。コミュニティ マネージャー開発者、講演者、コンテンツ作成者

です。

?この記事が気に入ったら、共有することを検討してください。

? すべてのリンク | X | LinkedIn

以上が完璧な Web サイトレイアウトのための CSS ボックス モデルをマスターする方法 ( Codepen の例)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。