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

ボックスモデルの紹介

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

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

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

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

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

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

実際のボックス モデル:

.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 ピクセルに増加します

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

にします。

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

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

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

* { box-sizing: border-box;}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

説明：

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

• Card Layout : .card クラスは、固定幅、丸い角、深さの影を持つコンテナを定義します。

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

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

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

• ボタン : CSS 遷移を示すホバー効果を備えた、典型的な行動喚起のスタイルに設定されています。

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

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

結論

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

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

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

? すべてのリンク | X | リンクトイン