HTMLの要素の種類：ブロックレベル要素とインライン要素

 HTMLにおける「ブロックレベル要素」と「インライン要素」は、Webページのレイアウトを理解する上で非常に重要な概念です。それぞれの特徴と使い方について、初心者向けに分かりやすく解説しますね。

HTMLの要素の種類：ブロックレベル要素とインライン要素

Webページに表示されるすべてのコンテンツ（テキスト、画像、リンクなど）は、HTMLの「要素」として扱われます。この要素には、大きく分けて2つの「表示形式」があります。それが「ブロックレベル要素」と「インライン要素」です。

例えるなら、

• ブロックレベル要素：積み木ブロックのようなもの。横いっぱいに広がり、新しい行から始まる。
• インライン要素：文中の単語のようなもの。文章の流れの中に溶け込み、必要な幅だけを占める。

1. ブロックレベル要素（Block-level Elements）

特徴:

• 新しい行から始まる: ブロックレベル要素は、原則として常に新しい行から始まり、その前後に改行が入ります。
  • たとえ横にスペースがあっても、次に続く要素は下に積み重なるように表示されます。
• 横幅いっぱいを占有する: 親要素（それ自身が入っている要素）の横幅いっぱいまで、自動的に横幅が広がります。
• 高さと幅の指定が可能: CSSを使って、width（幅）やheight（高さ）を自由に指定できます。
• 上下左右の余白（margin/padding）の指定が可能: 他の要素との間に空白（余白）を設けたり、要素の内部に余白を設定したりできます。
• 子要素としてブロックレベル要素もインライン要素も持てる: 中に他のブロックレベル要素やインライン要素を自由に配置できます。

よく使うブロックレベル要素の例:

• <div>：特定の意味を持たない汎用的なコンテナ（箱）。主に要素をグループ化してレイアウトを整えるために使います。
  HTML

  <div>
      <h2>見出し</h2>
      <p>これは段落です。</p>
  </div>
  

• <p>：段落。文章のまとまりを表します。
  HTML

  <p>この文章は一つの段落です。</p>
  <p>次の文章は別の段落です。</p>
  

  （ブラウザで表示すると、この2つの<p>タグの間には自動的に改行と上下の余白が入ります）
• <h1>～<h6>：見出し。ページの構造を示す重要な要素です。
  HTML

  <h1>ページのタイトル</h1>
  <h2>セクションの見出し</h2>
  

• <ul>、<ol>、<li>：リスト（箇条書きや番号付きリスト）。
  HTML

  <ul>
      <li>リスト項目1</li>
      <li>リスト項目2</li>
  </ul>
  

• <header>、<main>、<footer>、<section>、<article>、<nav>など：ページの構造を示すための意味的な要素（HTML5で導入された）。

使い方のイメージ:

• ページの各セクション（ヘッダー、メインコンテンツ、フッターなど）を区切る。
• 文章の段落を作る。
• 見出しを作成する。
• リストを作成する。
• 複数の要素をまとめて「箱」として扱い、レイアウトの基準とする。

2. インライン要素（Inline Elements）

特徴:

• 新しい行から始まらない: 文章の流れの中に溶け込むように表示され、横にスペースがあれば他のインライン要素やテキストと並んで表示されます。
• 内容の幅だけを占有する: 要素の中身（テキストや画像など）の幅に合わせて、横幅が決まります。横幅いっぱいには広がりません。
• 高さと幅の指定ができない（原則）: CSSでwidthやheightを指定しても、その通りには反映されません。（例外は後述）
• 上下の余白（margin/padding）の指定が難しい（原則）: 左右の余白は指定できますが、上下の余白は期待通りに反映されないか、周囲のレイアウトに影響を与えることがあります。（これも例外は後述）
• 子要素としてテキストや他のインライン要素しか持てない（原則）: 中にブロックレベル要素を直接入れることはできません。

よく使うインライン要素の例:

• <a>：リンク。他のページや場所に移動するための要素。
  HTML

  <p><a href="https://www.google.com/">Googleのサイト</a>へ</p>
  

• <span>：特定の意味を持たない汎用的なコンテナ。主にテキストの一部にスタイルを適用するために使います。
  HTML

  <p>これは<span style="color: red;">重要な</span>部分です。</p>
  

• <strong>：重要性や強調を表すテキスト（通常は太字）。
  HTML

  <p>絶対に<strong>見逃さないでください！</strong></p>
  

• <em>：強調を表すテキスト（通常は斜体）。
  HTML

  <p>これは<em>本当に</em>面白いです。</p>
  

• <img>：画像。
  HTML

  <img src="flower.jpg" alt="花の写真">
  

• <br>：改行。

使い方のイメージ:

• 文章の一部を強調したり、色を変えたりする。
• テキストの一部にリンクを設定する。
• 文章の中に画像を埋め込む。

ブロックレベル要素とインライン要素の「原則と例外」

HTML5以降、この「ブロックレベル要素」と「インライン要素」という分類は、CSSのdisplayプロパティで要素の表示形式をコントロールできるようになったため、以前ほど厳密な分類ではなくなりました。しかし、HTMLの要素がデフォルトでどのように振る舞うかを理解することは、レイアウトを考える上で非常に重要です。

特に覚えておくべき例外は、<img>要素です。これはインライン要素ですが、widthやheightを指定できます。また、CSSのdisplayプロパティを使うと、インライン要素をブロックのように振る舞わせたり（display: block;）、ブロック要素をインラインのように振る舞わせたり（display: inline;）することもできます。

さらに、display: inline-block;というプロパティもあり、これは「横に並ぶ（インライン）けど、幅や高さを指定できる（ブロック）」という便利な性質を持っています。

なぜこの違いを理解する必要があるのか？

• レイアウトの予測: 要素がどのように表示されるか（改行されるか、横に並ぶか）を予測できるようになります。
• CSSの適用: widthやheight、margin、paddingといったCSSのプロパティが、ブロックレベル要素とインライン要素でどのように適用されるかを理解できます。これにより、「なぜCSSが効かないんだろう？」という疑問が減ります。
• 正しいHTML構造: ブロックレベル要素の中にインライン要素は入れられますが、インライン要素の中にブロックレベル要素を直接入れることは原則としてできません（これはHTMLの構文エラーになる可能性があります）。正しい構造で記述するためにも、この区別は重要です。

最初は少し複雑に感じるかもしれませんが、実際にHTMLを書いてブラウザで表示させながら、「このタグは改行されるな」「このタグは横に並ぶな」と試していくうちに、感覚的に理解できるようになります。

まずは、上記で紹介した主要なタグをいくつか使って、ブロックレベル要素とインライン要素の違いを体験してみてください！