例で説明されたCSSボックスモデル

すばらしいWebページのレイアウトを作成する場合は、余白、境界線、パディング、およびコンテンツについて知っておく必要があります。画像であろうとテキストであろうと、Webデザインのすべての要素は、これらのプロパティを持つボックスを使用します。ボックスモデルをいじって、複雑なレイアウトを簡単に作成できます。この記事では、CSSボックスモデルを分析し、これらのプロパティの使用方法を実際の例とともに示します。

CSSボックスモデルとは何ですか？

CSSボックスモデルは、World Wide WebConsortiumによって作成された標準です。HTMLドキュメント内のすべての要素を、独自の寸法を持つ長方形のボックスとして記述します。これらのボックスには、コンテンツ領域と、オプションの周囲の余白、境界線、およびパディング領域が含まれています。それでは、CSSボックスの各部分を調べてみましょう。

CSSボックスモデルの4つのレイヤーを明らかにしましょう。

第1層：コンテンツ

コンテンツ領域には、画像、テキスト、または任意の形式のメディアコンテンツである要素のメインコンテンツが含まれます。高さと幅のプロパティを使用して、ブロックレベルの要素の寸法を変更できます。

第2層：パディング

パディングは、コンテンツボックスとその境界ボックスの間のスペースです。コンテンツの周囲に空白として配置されますが、背景色を使用して違いを視覚化できます。あなたは適用することができますパディングトップ、パディング右、パディング下、およびパディング左のスペースを変更するプロパティを。

第3層：ボーダー

境界線はコンテンツとパディング領域を囲みます。border-width、border-style、border-colorプロパティを使用して、境界線のサイズとスタイルを変更できます。

第4層：マージン

ボックスモデルの最後のレイヤーは、要素間のスペースを生成するために広く使用されています。余白は、コンテンツ、パディング、および境界領域をラップします。margin-top、 margin-right、margin-bottom、margin-leftの各プロパティを使用できます。また、marginプロパティに負の値または自動を指定して、いくつかのすばらしい配置手法を実現することもできます。

CSSボックスモデルのプロジェクト設定

ミニプロジェクトを作成して、コンテンツボックスとパディング、ボーダー、マージンのプロパティを備えた基本的なボックスモデルを示しましょう。テキスト、画像、またはメディアコンテンツを使用できます。まず、適切に構造化されていることを確認します。

HTMLを使用した構造

CSSボックスモデル

出力：

Chromeデベロッパーツールなどのブラウザの組み込み機能を使用して、何が起こっているかを確認できます。Unsplashの2つの画像を使用しています。簡単にするために、displayを使用してスマートフォンの画像を非表示にします。後で必要になるまで。

CSSを使用したスタイリング

/************************* BASIC STYLING *************************/ * { margin: 0px; padding: 0px; } body { display: flex; flex-direction: row; } .display { display: none !important; }

それでは、コンテンツボックスのスタイルを設定しましょう。まず、画像の高さと幅を設定します。また、背景色を指定すると、視覚化に役立ちます。だから、やってみましょう。

/************************* CONTENT BOX *************************/ .content-box { display: flex; flex-direction: row; justify-content: center; align-items: center; /* Styling the content box using height and width properties */ background-color: #fdf; height: 20em; width: 30em; }

パディングで呼吸するためのコンテンツルームを与える

あなたはどちらかに設定できパディングトップ、パディング右��パディング下、およびパディング左プロパティ個別に、または使用速記。時間を節約できるので、可能であれば速記を使用してみてください。パディングがどのように機能するか見てみましょう。

/************************* PADDING *************************/ /* Applying padding */ padding-top: 5em; padding-right: 2em; padding-bottom: 8em; padding-left: 2em; /* Padding shorthand */ /* top/right/bottom/left */ padding: 5em 2em 8em 2em; /* top/horizontal/bottom */ padding: 5em 2em 8em;

出力：

境界線を使用してパディングの周りに線を引く

borderプロパティを適用するときは、border-colorプロパティを使用して、境界線に背景とは異なる色を付けていることを確認してください。ボーダースタイルは、省略形のプロパティを使用して、個別に選択することも、一度に選択することもできます。同じことがborder-widthプロパティにも当てはまります。

また、border-radiusを設定して、ボックスの角を丸くし、半径をpx、rem、em、またはパーセントにすることもできます。

/************************* BORDER *************************/ /* Applying border properties */ /* Set the border color */ border-color: rgb(148, 234, 255); /* Select border style */ border-top-style: solid; border-right-style: dashed; border-bottom-style: groove; border-left-style: ridge; /* border-style shorthand */ /* top/right/bottom/left */ border-style: solid dashed groove ridge; /* Set border width */ border-top-width: 4em; border-right-width: 2em; border-bottom-width: 2em; border-left-width: 2em; /* border-width shorthand*/ /* top/right/bottom/left */ border-width: 4em 2em 2em 2em; /* top/horizontal/bottom */ border-width: 4em 2em 2em; /* border property shorthand */ /* border: 4em solid rgb(148, 234, 255); */ /* Set border-radius */ border-radius: 5em; border-radius: 20%;

出力：

マージンのあるボックス間にスペースを追加する

一定の幅がある場合は、margin： 0autoを使用してボックスを水平方向に中央揃えできます。

/************************* MARGIN *************************/ /* Applying margin properties */ margin-top: 4em; margin-right: 5em; margin-bottom: 3em; margin-left: 5em; /* Margin shorthand */ /* top/right/bottom/left */ margin: 4em 5em 3em 5em; /* top/horizontal/bottom */ margin: 4em 5em 3em; /* Using auto margin */ margin: 3em auto;

出力：

1、2、3、または4つの値を使用してmarginプロパティを指定できます。値は、長さ、パーセンテージ、またはautoなどのキーワードにすることができます。それがどのように機能するかを理解しましょう：

• 値を1つだけ指定すると、4辺すべてのマージンが同じになることを意味します。
• 2つの値を指定する場合、最初の値はmargin-topとmargin-bottomを示し、2番目の値はmargin-rightとmargin-leftを指定します。
• 3つの値を指定すると、最初と最後がそれぞれmargin-topとmargin-bottomに適用されます。中央の値は、水平領域、つまり、margin-rightとmargin-leftです。
• 4つの値すべてを指定すると、それらはそれぞれ上、右、下、左（時計回りの順序）に適用されます。

これらのショートカットをパディングとボーダーのプロパティに使用することもできることに注意してください。

参照：重要なCSS3プロパティのチートシート

マイナスの証拠金を使用したことがありますか？それを視覚化するために、表示を消去しましょう。2番目の画像を表示するにはnoneを使用してから、負のマージンを設定します。

/* .display { display: none !important; } */ .content-box { display: flex; flex-direction: row; align-items: center; background-color: #fdf; height: 20em; width: 30em; padding: 5em 2em 8em; border-style: solid dashed groove ridge; border-width: 4em 2em 2em; border-radius: 20%; /* Using negative margin */ margin: 3em -20em 3em 5em; }

出力：

ボックスモデル：ピクセルパーフェクトなウェブサイトの作成

ボックスモデルを使用すると、要素間のスペースを定義したり、境界線を追加したり、複雑な外観のレイアウトを簡単に作成したりできます。あなたは素晴らしいウェブサイトを作成するためにすぐに始めることができます。その間、border-boxプロパティを詳細に調べて、上記のコードを試してみることができます。

CSSでコンテンツをレイアウトする方法は他にもあることを理解する必要があります。これらには、CSSグリッドとCSSフレックスボックスが含まれます。ボックスモデルに慣れたら、これらの代替案について学習を続ける必要があります。