TECH I.S.

CSS ボックスモデル


すべてのHTML要素はボックスと見なすことができます。


CSS ボックスモデル

CSSでは、デザインとレイアウトについて話すときに「ボックスモデル」という用語が使用されます。

CSSボックスモデルは基本的に、すべてのHTML要素を囲むボックスです。マージン、ボーダー、パディング、および実際のコンテンツで構成されます。以下の画像は、ボックスモデルを示しています。

各パーツの説明:

  • コンテンツ- テキストと画像が表示されるボックスのコンテンツ
  • パディング- コンテンツの周囲をクリアします。パディングは透明です
  • 境界線- パディングとコンテンツを囲むボーダー
  • マージン- 境界外のエリアをクリアします。マージンは透明

ボックスモデルを使用すると、要素の周囲に境界線を追加したり、要素間のスペースを定義したりできます。

ボックスモデルのデモンストレーション:

div {   width: 300px;   border: 15px solid green;   padding: 50px;   margin: 20px; }

自分で試してみる »


要素の幅と高さ

すべてのブラウザーで要素の幅と高さを正しく設定するには、ボックスモデルがどのように機能するかを知る必要があります。


重要:CSSを使用して要素の幅と高さのプロパティを設定する場合は、コンテンツ領域の幅と高さを設定するだけです。要素のフルサイズを計算するには、パディング、境界線、マージンも追加する必要があります。


この<div>要素の合計幅は350ピクセルになります。

div {   width: 320px;  padding: 10px;  border: 5px solid gray;  margin: 0; }

自分で試してみる »

計算は次のとおりです。

320px (幅)
+ 20px (左 + 右パディング)
+ 10px (左と右の境界線)
+ 0px (左 + 右余白)
= 350px

要素の幅の合計は、次のように計算する必要があります。

要素の合計幅 = 幅 + 左パディング + 右パディング + 左ボーダー + 右ボーダー + 左余白 + 右余白

要素の高さの合計は、次のように計算する必要があります。

要素の高さの合計 = 高さ + 上部パディング + 下部パディング + 上部ボーダー + 下部ボーダー + 上部余白 + 下部余白




プログラミング学習を加速させる

プログラミングをプロの講師に教えてもらいませんか。

テックアイエスのプログラミングスクールは初心者も大歓迎です。年齢制限もありません。転職・副業に強く、挫折させない手厚いサポートで稼ぐ力を身につけましょう!

スクールの詳細