ブロックモデルの導入

1.1 ブロックモデルの基本

ブロックモデルは、ウェブページ上で要素がどのように配置され、互いにどのように作用し合うかを理解するための基礎だよ。HTML要素の構造とサイズを定義して、どのようにマージンやボーダー、外部マージンに囲まれてるかを決めてるんだ。

ブロックモデルの基本

CSSのブロックモデルはHTML要素のブロックの構成を説明してるよ。各要素は4つの基本コンポーネントから成り立ってる：

• コンテンツ (content).
• パディング (padding).
• ボーダー (border).
• マージン (margin).

これらのコンポーネントは、要素がどのように表示され、ページ上で他の要素とどのように作用するかを決めてるんだ。

コンテンツ (Content)

コンテンツ (content) は要素のメイン部分で、テキストや画像、他のネストされた要素が入ってるんだ。コンテンツのサイズは、widthとheightプロパティを使って明示的に指定できるし、要素の内容によって決まることもあるよ。

使用例

この例では、要素.contentの内容が「これは要素の内容です。」を含んでるよ：

    
      .content {
        background-color: #e0e0e0;
        padding: 20px;
        border: 2px solid #000;
        margin: 20px;
      }
    
  

    
      <div class="content">
        これは要素の内容です。
      </div>
    
  

1.2 ブロックモデルのビジュアライゼーション

ブロックモデル内の各要素は次の部分からなる長方形のブロックとして表現できるよ：

• コンテンツ (Content): 要素の内部コンテンツ、例えばテキストや画像
• パディング (Padding): コンテンツと要素のボーダーとの間のスペース
• ボーダー (Border): パディングとコンテンツを囲む線
• マージン (Margin): 要素のボーダーと隣接する要素との間のスペース

ブロックモデルのビジュアライゼーション:

    
      .element {
        width: 200px;           /* コンテンツの幅 */
        padding: 10px;          /* パディング */
        border: 2px solid red;  /* ボーダー */
        margin: 20px;           /* マージン */
      }
    
  

1.3 ボーダー (Border)

ボーダー (border) は要素のコンテンツとパディングを囲むよ。ボーダーにはいろんなスタイル、厚さ、色を持たせることができるんだ。ページ上で要素を視覚的に目立たせるためにも使えるよ。

使用例

この例では要素.border に5ピクセルの太さ、黒色で点線のボーダーを適用して、コンテンツとパディングを囲んでるよ。

    
      .border {
        background-color: #e0e0e0;
        padding: 20px;
        border: 5px dashed #000;
        margin: 20px;
      }
    
  

    
      <div class="border">
        これはボーダーを持つ要素です。
      </div>