CSSを使用してHTML要素のコンテンツ、パディング、境界線、およびマージンを調整する方法

序章

このチュートリアルでは、 CSSボックスモデルについて学習します。これは、HTML要素のコンテンツ、パディング、境界線、および余白を参照するために使用されるモデルです。 CSSボックスモデルを理解すると、HTML要素のこれらの部分のサイズを調整し、要素のサイズと位置がどのように決定されるかを理解するのに役立ちます。 このチュートリアルでは、CSSボックスモデルの各ボックスについて説明することから始め、CSSスタイルルールを使用して値を調整するための実践的な演習に進みます。

前提条件

このチュートリアルに従うには、このシリーズの前のチュートリアルCSSおよびHTML練習プロジェクトのセットアップ方法の指示に従って必要なファイルとフォルダーをセットアップしたことを確認してください。

CSSボックスモデル

HTML要素は、一連の4つの重なり合うボックスとして理解できます。

• コンテンツボックスは、テキストまたは画像のコンテンツが配置される最も内側のボックスです。 デフォルトでは、そのサイズは、含まれるコンテンツのサイズによって設定されることがよくあります。 また、ボックスモデル内で、デフォルトで値が通常ではなくゼロである唯一のボックスです（コンテンツが含まれている場合）。 対照的に、要素のパディング、境界線、およびマージンは、多くのHTML要素（ <p>, <h1>、 と <img> 要素）特に指定しない限り。 要素の幅と高さの値を設定するときは、通常、コンテンツボックスの幅と高さを変更します。
• パディングボックスは、コンテンツボックスを囲む透明なスペースで構成される2番目のオーバーラップボックスです。 デフォルトでは、多くのHTML要素のパディングはゼロに設定されています。 要素のパディングのサイズを大きくすると、コンテンツボックスと境界ボックスの間の距離が長くなります。
• ボーダーボックスは、パディングボックスを囲む3番目のオーバーラップボックスです。 デフォルトでは、ほとんどのHTML要素の境界線の値はゼロに設定されています。 要素の境界線のサイズを大きくすると、パディングボックスとマージンボックスの間の距離が大きくなります。 境界線の色、太さ、スタイルを調整できることに注意してください。
• マージンボックスは、要素の境界の外側の透明なスペースで構成される4番目で最後のオーバーラップボックスです。 デフォルトでは、一部のHTML要素のマージン値はゼロに設定されていますが、一部の要素では、デフォルトとしてマージン値が指定されています。 <h1> 終えた <h6> 見出しタグ。 マージン崩壊と呼ばれる動作では、2つの異なる要素のマージンがオーバーラップすることもあります。 これが発生すると、マージンサイズは、デフォルトで、要素のマージンが最も大きいサイズになります。

CSSボックスモデルのコンポーネントに精通しているので、これらのさまざまなボックスのスタイル設定を練習して、HTML要素のレイアウトとスタイル設定を行うためにそれらがどのように連携するかを調べることができます。 まず、を作成します <div> テキストコンテンツを含む要素を作成し、これらの各ボックスの値を調整して、要素内での位置を示すのに役立てます。

CSSを使用したHTML要素のコンテンツサイズの調整

まず、このシリーズの前のチュートリアルCSSおよびHTML練習プロジェクトの設定方法の説明に従って必要なファイルとフォルダーを設定していることを確認してください。

中のすべてを消去します styles.css ファイル（ファイルに以前のチュートリアルのコンテンツが含まれている場合）および次のCSSルールを styles.css ファイル：

.yellow-div {
  background-color:yellow;
}

を助けて styles.css ファイル。 クラスセレクターを使用してクラスを作成しました yellow-div. どれでも <div> このクラスに割り当てる要素の背景色は黄色になります。

次に、あなたのすべてのコンテンツを消去します index.html ファイル（コードの最初の行を除く： <link rel="stylesheet" href="css/styles.css">）そして、次のコードスニペットを追加します。

<div class="yellow-div">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
</div> 

ファイルを保存してブラウザにロードします。 次の結果が表示されます。

Webページには、HTMLファイルに追加したテキストコンテンツを含む黄色のボックスが表示されます。 現在、最も内側のボックス（コンテンツボックス）のみがサイズと値を持っています。 パディング、ボーダー、マージンはすべてゼロに設定されています。 黄色のボックスの幅と高さは、内部のテキストコンテンツのサイズによって自動的に決定されることにも注意してください。 <div> 容器。 テキストコンテンツを加算または減算して、サイズがどのように変化するかを試してください。 <div> それに応じてコンテナが変更されます。

次に、幅を指定しましょう <div> ブラウザでの要素の表示がどのように変化するかを調べるためのコンテナ。 次の強調表示された行をCSSルールに追加します styles.css 設定するファイル width 500ピクセルまで：

.yellow-div {
  background-color:yellow;
  width: 500px;
}

ファイルを保存してブラウザにロードします。 君の <div> コンテナの幅は500ピクセルになり、テキストコンテンツが内部に収まるように高さが自動的に調整されます。

高さを指定することもできることに注意してください <div> 代わりに要素を作成し、幅を自動的に調整できるようにします。 または、高さと幅の両方を指定できますが、コンテンツが <div> コンテナの場合 <div> 要素が小さすぎます。

CSSを使用してHTML要素のパディングサイズを調整する方法

次に、パディングサイズを大きくして、表示がどのように変化するかを調べてみましょう。 <div> エレメント。 次の強調表示された行をCSSルールに追加します styles.css 設定するファイル padding 25ピクセルまで：

[label styles.css] 
.yellow-div {
  background-color:yellow;
  width: 500px;
  padding:25px;
}

を助けて styles.css ファイルを作成してリロードします index.html ブラウザのファイル。 黄色のボックスのサイズは、テキストコンテンツとボックスの周囲の間に25ピクセルのスペースを確保できるように拡張する必要があります。

パディング値のサイズを調整することにより、パディングのサイズを変更できます。 次のプロパティを使用して、要素の特定の辺のパディングサイズを変更することもできます。 padding-left, padding-right, padding-top, padding-bottom. たとえば、宣言を置き換えてみてください padding:25px; あなたの中で styles.css 以下の強調表示されたスニペットを含むファイル：

[label styles.css] 
.yellow-div {
  background-color:yellow;
  width: 500px;
  padding-left:25px;
  padding-right: 50px;
  padding-top: 100px;
  padding-bottom: 25px;
}

を助けて styles.css ファイルをロードし、 index.html ブラウザのファイル。 次のようなものを受け取るはずです。

要素の個々の側面にパディングサイズを指定する方法を知っていると、Webページにコンテンツを配置するときに役立ちます。

CSSを使用してHTML要素の境界線のサイズ、色、およびスタイルを調整する

ここで、HTML要素の境界線の値を設定する練習をしましょう。 borderプロパティを使用すると、サイズ、色、およびスタイル（たとえば、 solid, dashed, dotted, inset、 と outset）HTML要素の。 これらの3つの値は、次のようにborderプロパティに割り当てることによって設定されます。

selector {
  border: size style color;
}

次の強調表示された宣言を追加して、幅5ピクセルの黒い実線の境界線を追加してみてください。

.yellow-div {
  background-color:yellow;
  width: 500px;
  padding: 25px;
  border: 5px solid black;
}

（前のチュートリアルセクションのさまざまなパディング宣言を消去して、単一のパディング宣言に置き換えることをお勧めします padding:25px; ルールセットを管理しやすくするための宣言）。 を助けて styles.css ファイルとリロード index.html ブラウザで変更を確認します。 これで、黄色のボックスに、CSSルールで設定した値との境界線が表示されます。

値を変更して、ブラウザーでの要素の表示がどのように変わるかを調べることができます。 パディングと同様に、プロパティで調整する境界線側を指定することもできます border-right, border-left, border-top, border-bottom.

CSSを使用したHTML要素のマージンサイズの調整

次に、CSSで要素の余白のサイズを調整してみましょう。 この演習では、マージンに非常に大きな値を設定して、ブラウザーでマージンサイズがどのように表示されるかを簡単に確認できるようにします。 次の強調表示された宣言をルールセットに追加します styles.css マージンを100ピクセルに設定するファイル：

  .yellow-div {
  background-color:yellow;
  width: 500px;
  padding: 25px;
  border: 5px solid black;
  margin:100px;
}

を助けて styles.css ファイルとリロード index.html ブラウザで変更を確認します。 黄色のボックスは、境界とビューポートの端の間に100ピクセルのマージンスペースを確保するために、100ピクセル下、100ピクセル右に移動する必要があります。

パディングやボーダーと同様に、マージンの特定の辺のサイズは、 margin-left, margin-right, margin-top、 と margin-bottom.

先に進む前に、別のものを追加します <div> マージンが近くのコンテンツの位置にどのように影響するかを調べるためのページへのコンテナ。 何も消去せずに、CSSルールセットを追加します styles.css ファイル：

. . .
.blue-div {
  height:100px;
  width:100px;
  background-color: blue;
}

ファイルを保存して、 index.html ファイル。 何も消去せずに、以下を追加します <div> 要素をファイルに割り当て、それに割り当てます blue-div クラス：

…
<div class="blue-div"></div>

あなたの index.html ファイルを作成し、ブラウザにロードします。 次のようなものを受け取るはずです。

ブラウザに、幅100ピクセル、高さ1000ピクセルの青いボックスが表示されます。 この青いボックスは、黄色のボックスのマージンのために、黄色のボックスの100ピクセル下にある必要があります。 一般に、周囲の要素は、デフォルトでは、そのマージンのために要素から押しのけられます。 ただし、マージンの崩壊により、隣接する要素のマージンが重なることがよくあることに注意してください。 重なり合うマージンのサイズは、2つの要素間の最大マージンのサイズによって決まります。

結論

このチュートリアルでは、CSSボックスモデルと、そのコンテンツ、パディング、境界線、およびマージンの各プロパティのサイズを調整する方法について学習しました。 これらのプロパティの動作と値の設定方法を理解すると、Webページのコンテンツを整理およびスタイル設定するときに役立ちます。 この知識は、残りのチュートリアルでデモンストレーションWebサイトを構築するときに役立ちます。 次のチュートリアルでは、 index.html ウェブサイトのホームページとして機能するファイル。