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

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

Barbara Streisand

リリース： 2024-10-26 09:09:30

オリジナル

169 人が閲覧しました

How to Master the CSS Box Model for Perfect Website Layouts ( Codepen examples)

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

ボックスモデルの紹介

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

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

コンテンツ : これはボックスの実際のコンテンツであり、テキスト、画像、その他の要素が配置されます。そのサイズは幅と高さのプロパティによって定義されます。
パディング : これは、境界線内のコンテンツの周囲のスペースです。別途スタイルを設定しない限り、パディングは透明です。
Border : パディングとコンテンツを囲みます。幅、スタイル (実線、破線など)、色を指定してスタイルを設定できます。
マージン : これは境界線の外側のスペースです。また、透明であり、要素間の間隔に影響します

実際のボックスモデル:

.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 のように見えるスタイルです。