HTMLのブロックモデル

9.1 ブロック要素

HTMLのブロックモデルは、ドキュメント内のHTML要素の構造と表示を説明するコンセプトだよ。開発者が要素同士のやり取りやページ上の配置を理解するのに役立ってる。ブロックモデルを理解することは、構造がしっかりしていて美しいウェブページを作るために重要なんだ。

HTMLのブロックモデルは、主に2つのタイプの要素から成ってるんだ：ブロック要素とインライン要素だよ。これらの要素はウェブページのレイアウトで重要な役割を果たしてるんだ。

ブロック要素

ブロック要素の例:

    
      <div>
        <h1>見出し</h1>
        <p>これはdivブロック要素内のテキストの段落です。</p>
      </div>
    
  

9.2 インライン要素

インライン要素 (inline-level elements) はその内容に必要な幅だけを占めて、新しい行から始まらないんだ。インライン要素かテキストのみを含むことができるよ。インライン要素の例を見てみよう：

インライン要素の例:

    
      <span>これは<strong>太字のテキスト</strong>と<em>斜体テキスト</em>がある段落です。</span>
    
  

9.3 ブロックモデルの構成要素

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

• コンテンツ (Content): 要素内のコンテンツ、例えばテキストや画像
• 内側の余白 (Padding): コンテンツと要素の境界の間のスペース
• 境界 (Border): 内側の余白とコンテンツを囲む線
• 外側の余白 (Margin): 要素の境界と隣接する要素の間のスペース

ブロックモデルの視覚化:

    
      .element {
        width: 200px;           /* コンテンツの幅 */
        padding: 10px;          /* 内側の余白 */
        border: 2px solid red;  /* 境界 */
        margin: 20px;           /* 外側の余白 */
      }
    
  

ブロックモデル付きのHTMLの例:

この例では、クラスが "box" の <div> 要素は幅200px、内側の余白10px、境界2px、外側の余白20pxを持ってるんだ。これらのプロパティは、要素がページ上でどのように表示されるか、他の要素とどのように相互作用するかを決定しているよ。

    
      .box {
        width: 200px;
        padding: 10px;
        border: 2px solid red;
        margin: 20px;
      }
    
  

    
      <div class="box">
        これはブロックモデルの例です。
      </div>