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

序章

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

前提条件

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

CSSボックスモデル

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

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

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

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

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

styles.cssファイルのすべてを消去し（ファイルに前のチュートリアルのコンテンツが含まれている場合）、次のCSSルールをstyles.cssファイルに追加します。

styles.css

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

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

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

index.html

<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>コンテナのサイズがそれに応じてどのように変化するかを試してみてください。

注：FirefoxのWeb開発ツールを使用して、HTML要素のボックスモデルと各ボックスに設定された値を表示できます。上部のメニューバーの[ツール]メニュー項目に移動し、ドロップダウンメニューから[Web開発者/ツールの切り替え]を選択します。開発者ツールがウィンドウの下部に表示されます。ツールキットメニューの左端にある矢印アイコンをクリックしてから、検査する要素をクリックします。選択した要素のボックスモデルが、[開発者ツール]ウィンドウペインの右下に表示されます。表示するには、ウィンドウを展開する必要がある場合があります。

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

styles.css

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

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

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

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

次に、パディングサイズを大きくして、<div>要素の表示がどのように変化するかを調べてみましょう。 styles.cssファイルの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。たとえば、styles.cssファイルの宣言padding:25px;を、以下の強調表示されたスニペットに置き換えてみてください。

[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ピクセルの黒い実線の境界線を追加してみてください。

styles.css

.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ピクセルに設定します。

styles.css

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

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

注：黄色のボックスには、元々、上部と左側、およびビューポートの端の間にわずかな空白があったことに気付いたかもしれません。このマージンは、ビューポートの端とWebサイトのコンテンツの間にスペースを空けるために、一部のブラウザーによって自動的に作成されます。このマージンを削除するには、上下のマージンをゼロに設定します。

パディングやボーダーと同様に、マージンの特定の辺のサイズは、margin-left、margin-right、margin-top、およびmargin-bottomを使用して設定できます。

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

styles.css

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

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

index.html

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

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

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

結論

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