CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSボックスモデル：ハウツーガイド

ブラウザはCSSボックスモデルを使用して、要素がWebページにどのように表示されるかを決定します。ボックスモデルは、要素のサイズとその境界線、パディング、およびマージンを表します。これらの各要素のスタイルを個別に設定できます。

すべての要素はボックスで囲まれています。これらのボックスがどのように機能するかを理解できることは、Webページ上で希望する方法でアイテムを配置するための重要な部分です。

CSSボックスモデルは、Webページでのボックスの表示方法と配置方法を決定するために使用されます。このモデルは、CSSのボックスを構成する4つのコンポーネント（コンテンツ、パディング、ボーダー、マージン）を参照します。このチュートリアルでは、CSSボックスモデルの基本とその主要部分について説明します。

CSSボックスモデル

CSSボックスモデルは、CSSのすべてのボックスに適用される構造です。このボックスモデルは、ボックスのさまざまな部分がWebページに表示される要素を作成する方法をブラウザに指示します。ボックスモデルは、ボックスのコンテンツ、パディング、境界線、および余白を表します。

ボックスモデルの各要素を見てみましょう：

  • コンテンツ。ボックスのコンテンツ。テキスト、フォーム、画像、その他のウェブ要素が表示されます。
  • パディング。ボックスの内容とボックスの境界線の間のスペース。ボックスのパディングは透明です。
  • ボーダー。ボックスの内容を囲む境界線、またはパディング値が指定されている場合はボックスのパディングを囲む境界線。
  • マージン。境界線の外縁とWebページ上の他の要素の間のスペース。ボックスのパディングは透明です。

これらの各コンポーネントと、それらを1つずつ使用する方法について説明しましょう。

コンテンツエリア

コンテンツ領域はボックスモデルの中央にあります。これは、テキスト、画像、およびその他の要素がWeb要素に表示される場所です。高さと幅のCSSプロパティを使用して、コンテンツ領域のサイズを決定します。

デフォルトでは、コンテンツ領域のサイズはその要素のサイズと同じになります。テキスト行がある場合、ボックスはテキスト行と同じ長さと高さになります。

参加者の81％は、ブートキャンプに参加した後、自分たちの技術的な仕事の見通しについてより自信を持っていると述べました。今日のブートキャンプにマッチしましょう。

平均的なブートキャンプの卒業生は、ブートキャンプの開始から最初の仕事を見つけるまで、キャリアの移行に6か月も費やしませんでした。

高さ200px、幅200pxのボックスを設計するとします。このコードを使用してこれを行うことができます：

<html>


<p>This is a box.</p>

</html>

<style>

p {
	height: 200px;
	width: 200px;
}
</style>

CSSボックスモデル：ハウツーガイド 上記のコードエディタのボタンをクリックして、HTML/CSSコードの出力を確認します。>

HTMLの

タグを使用して、テキストの段落を作成しました。 Webデザインのすべての要素がボックス内にあるため、ボックスモデルが

タグに適用されることを忘れないでください。 CSSコードでは、すべての

タグの高さを200pxに設定するルールを作成します。また、すべての

タグの幅を200pxに設定しました。

幅と高さ、およびCSSコンテンツ領域の詳細については、CSSの高さと幅に関する初心者向けガイドをお読みください。

パディングエリア

パディング領域はコンテンツ領域を拡張します。ボックスの内容とその境界の間にギャップが作成されます。パディングは、Webページにバナーやその他のアナウンス要素を作成するためによく使用されます。

ボックスにパディングを適用するには、CSSパディングプロパティを使用できます。最後のボックスの周りに25pxのパディングを適用するとします。このコードを使用してこれを行うことができます：

<html>


<p>This is a box.</p>
</html>

<style>

p {
	height: 200px;
	width: 200px;
	padding: 20px;
}
</style>

CSSボックスモデル：ハウツーガイド 上記のコードエディタのボタンをクリックして、HTML/CSSコードの出力を確認します。>

「padding」プロパティを指定し、その値を20pxに設定しました。これにより、ボックスのコンテンツ領域とボックスの境界の間に20pxのギャップが作成されます。

ボックスとページの端の間にギャップができました。

国境地帯

境界領域は、ボックスの境界が表示される場所です。境界線は、パディングの外側の色付きのアウトラインです。任意の色を使用して境界線のスタイルを設定できます。ボーダーのデザインも多数組み込まれています。

ボックスの周囲に幅5pxの水色の境界線を追加するとします。このコードを使用してこれを行うことができます：

<html>


<p>This is a box.</p>
</html>

<style>

p {
	height: 200px;
	width: 200px;
	padding: 20px;
	border: 5px solid lightblue;
}
</style>

CSSボックスモデル：ハウツーガイド 上記のコードエディタのボタンをクリックして、HTML/CSSコードの出力を確認します。>

CSSの「border」プロパティを使用して、幅5pxの水色の境界線を定義します。この境界線は、単一線の境界線を作成する「実線」スタイルを使用します。境界線がボックスの内容から分離されていることに注意してください。これは、ボックスの周囲に20pxのパディングを指定したためです。

マージンエリア

マージン領域は、ボックスモデルの最外層です。この領域は、Webページ上の要素を他の要素から分離する空のギャップを作成します。

Webページの2つのボックスの間に10pxのスペースを作成するとします。このコードを使用してこれを行うことができます：

<html>


<p>This is a box.</p>
<p>This is another box.</p>

</html>
<style>

p {
	height: 200px;
	width: 200px;
	padding: 20px;
	border: 5px solid lightblue;
	margin: 10px;
}
</style>

CSSボックスモデル：ハウツーガイド 上記のコードエディタのボタンをクリックして、HTML/CSSコードの出力を確認します。>

今回は、HTMLファイルで2つのボックスを指定しました。次に、「margin」プロパティを使用して、ボックスに10pxのマージンを適用しました。

ご覧のとおり、ボックス間に10pxのギャップがあります。これは、ボックスにマージンを適用したためです。これにより、ボックスの境界とWebページ上の他の要素の間にギャップが生じます。

マージン領域の詳細については、CSSマージンに関するチュートリアルをお読みください。

幅と高さの計算

初心者が犯しがちな間違いの1つは、要素の高さとその幅がパディング、マージン、および境界線を考慮していると想定することです。これは正確ではありません。

高さと幅のプロパティを使用すると、コンテンツ領域の高さと幅を設定できます。 ウェブ要素の。これは、Webページの他の要素を考慮していません。

以前の完全なボックスの例が占めるスペースを知りたい場合は、簡単な計算を実行する必要があります。前のセクションの「マージン領域」の例で指定した値は次のとおりです。

  • 高さ：200px
  • 幅：200px
  • パディング：20px
  • マージン：10px
  • 境界線：5px

幅を計算するには、次の式を使用できます。

  • 200px（幅）+
  • 40px（左右のパディング）+
  • 10px（左右の境界線）+
  • 20px（左右の余白）

これにより、合計 270pxが残ります。 。

高さを計算するには、ボックスの高さを使用します。パディング、ボーダー、マージンにも上と下の値を使用します。

結論

CSSボックスモデルは、Webページに要素をレンダリングするために使用される構造です。 HTMLのすべての要素は長方形のボックスです。ボックスモデルは、ボックスのコンテンツ、パディング、境界線、および余白がどのように表示されるかを定義します。

CSSを使用したWebページのデザインについてもっと知りたいですか？ CSSの学習方法ガイドをご覧ください。このガイドには、CSSの知識を深めるために使用できる主要な学習リソースのリストが含まれています。


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

    HTMLドキュメントのすべての要素は、ブラウザによって長方形のボックスとしてレンダリングされます。幅、高さ、パディング、マージンによって、要素の周囲に割り当てられるスペースが決まります。次の図は、ボックスモデルの概念を示しています- 出典：w3.org コンテンツ これには、テキスト、画像、またはその他のメディアコンテンツの形式の実際のデータが含まれます。幅と高さのプロパティは、このボックスの寸法を変更します。 パディング コンテンツの外縁とその境界の間のスペースは、パディングを指します。このボックスは、paddingプロパティによってサイズを変更できます。 paddi

  2. CSSのマージンとパディング

    マージンについては、CSSマージンプロパティを使用します。 marginプロパティは、HTML要素の周囲のスペースを定義します。 パディングの場合、パディングプロパティを使用すると、要素のコンテンツとその境界線の間に表示するスペースの量を指定できます。 以下は、CSSでマージンとパディングを表示するコードです- 例 <!DOCTYPE html> <html> <head> <style> body {    font-family: "Segoe UI", Tahoma, Geneva, Verdan