HTML コース

✓ ✓ ✓ ✓ ✓ ✓ 6

6 STEP 6 / 7

レッスン6：divとspan・ページ全体を整理しよう

⏱ 約25分やってみよう 1 クイズ 1

📋 前提知識：レッスン5：フォームを作ろうを完了してください

🎯 このレッスンで学ぶこと

ブロック要素とインライン要素の違いを説明できます。
divタグでページをセクションに分けられます。
spanタグで文中の一部を指定できます。
idとclassの使い分けを説明できます。

📖 前回の復習（レッスン5）

<form> でフォーム全体を囲み、<input> で入力欄を作る
type="text"・type="radio"・type="checkbox" など種類を指定できる
<label> で入力欄に説明テキストを関連付ける

📖 導入 — ページを「部屋」に分けよう

本物のウェブサイトを見ると、ページが大きく3つのエリアに分かれていることが多いです。上部のヘッダー、中央のメイン、下部のフッター。HTMLでこういった「エリア分け」をするのが <div> の仕事です。

div 自体は見た目を変えません。「ここからここまでが1つのまとまり」と印をつけるだけです。CSS と組み合わせることで初めてデザインが生まれます。これが「構造（HTML）と見た目（CSS）の分離」という考え方です。

このレッスンはHTMLコースの最終回。CSSと組み合わせるための土台を作りましょう！

📝 div・span・id・classの使い方

ブロック要素とインライン要素

種類	特徴	代表的なタグ
ブロック要素	前後で改行され、横幅いっぱいに広がる	`<h1>` `<p>` `<div>`
インライン要素	前後で改行されず、文の流れの中に入る	`<a>` `<img>` `<span>`

セクションを分ける：`}>

<div> はブロック要素で、複数のタグをひとまとめにする「入れ物」です。それ自体は見た目に何も影響しませんが、CSSでデザインを当てるときに使います。

<div>
  <h2>自己紹介</h2>
  <p>名前は〇〇です。</p>
</div>

▶ プレビュー

↑ div に枠線をつけると「ここが1つのまとまり」と視覚的にわかります。

💡 div はデザインの「下準備」:
div 自体は何も見た目を変えません。「ここからここまでが1つのグループ」と印をつけるだけです。CSS で背景色・枠線・余白を追加して初めてデザインが生まれます。CSSコースで本格的に使います。

文中の一部を指定する：`}>

<span> はインライン要素で、文章の中の一部だけを指定する「入れ物」です。

<p>わたしの好きな色は<span>青</span>です。</p>

と属性

<div> や <span> に名前をつけることで、CSSから「どの要素か」を指定できます。

<!-- id：1ページに1つだけの名前 -->
<div id="header">ここがヘッダー</div>

<!-- class：複数の要素に同じ名前をつけられる -->
<p class="highlight">この文は強調されます。</p>
<p class="highlight">この文も同じスタイルになります。</p>

属性	使いどころ
`id`	ページ内で1つしかない要素（ヘッダー・フッターなど）
`class`	同じスタイルを複数の要素に使いまわしたいとき

💡 id と class は今は「名前をつけるもの」と覚えておけばOKです。CSSコースで本格的に使い方を学びます！

💡 id と class の使い分け：
CSSでスタイルを当てるときは class を使うのが一般的です。id はJavaScriptで特定の1つの要素を操作するときに使います。

CSS で div にスタイルを当てる（体験）

div に class をつけて CSS でスタイルを当てると、見た目が大きく変わります。

Before（CSSなし）:

▶ プレビュー

After（CSSあり）:

▶ プレビュー

同じ div でも、class + CSS を加えるだけでカードデザインになります。

#id / .class セレクタの最小例:

<style>
  #header { background: #4338ca; color: white; padding: 12px; }
  .highlight { color: red; font-weight: bold; }
</style>

<div id="header">ヘッダー</div>
<p class="highlight">強調テキスト</p>
<p class="highlight">こちらも強調</p>

▶ プレビュー

💡 発展：セマンティックタグについて
HTML5では <div id="header"> の代わりに <header>、<div id="main"> の代わりに <main>、<div id="footer"> の代わりに <footer> というタグが使えます。意味が明確になり、SEOやアクセシビリティに有利です。詳しくはHTMLセマンティックタグとは？を読んでみましょう。

🆚 div だけ vs セマンティックタグの違い:

❌ div だけ: <div id="header">...</div>
✅ セマンティック: <header>...</header>

見た目は同じですが、検索エンジンやスクリーンリーダーには大きな違いがあります。<header> <main> <footer> を使うと、「ここがヘッダー」「ここが本文」と機械が理解できます。

💻 やってみよう！

VS Codeで my-practice フォルダの index.html を開いてください。（前のレッスンのファイルを上書きして使います）

index.html の <body> を以下のように書き換えてください。

index.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    
  </head>
  <body>

    <div id="header">
      <h1>わたしのプロフィール</h1>
    </div>

    <div id="main">
      <h2>自己紹介</h2>
      <p>名前は<span class="highlight">〇〇</span>です。</p>
      <p>好きな教科は<span class="highlight">数学</span>です。</p>
    </div>

    <div id="footer">
      <p>&copy; 2026 〇〇</p>
    </div>

  </body>
</html>

▶ プレビュー

ブラウザで開くと、見た目はこれまでと変わりません。でも、ページが3つのブロックに整理されました。CSSを当てる準備ができた状態です！

✅ 見た目は変わりませんが、開発者ツール（F12）の Elements タブを開くと、ページが3つの div ブロック（header・main・footer）に整理されているのが確認できます。これがCSSでデザインを当てるための準備です。

CSS体験: style タグで div に色を付けてみよう

<head> の中に以下の <style> タグを追加してみましょう:

<style>
  #header { background: #4338ca; color: white; padding: 12px; }
  #main { padding: 20px; }
  #footer { background: #f0f0f0; padding: 12px; text-align: center; }
</style>

div に id をつけて CSS で色を変えるだけで、ページの構造が視覚的にわかるようになります！

自由課題:

header の背景色を好きな色に変えてみよう
main の中に <div class="card"> を追加して、カードスタイルを当ててみよう
<span> で文中の一部だけ色を変えてみよう（例: <span style="color:red;">赤い文字</span>）
footer に text-align: center を追加して中央寄せにしてみよう

⚠️ よくあるミス

div と span の使い分けを間違える：<div> はブロック要素（前後で改行される）、<span> はインライン要素（文の流れに入る）です。文中の一部だけ指定したいときは <span> を使いましょう。
同じ id を複数の要素に使ってしまう：id は1ページに1つだけの名前です。同じ名前を複数の要素に使いたいときは class を使いましょう。
div を使いすぎる（div 地獄）：何でも div で囲むのではなく、意味のあるタグ（<header>, <nav>, <main> など）を使えるときはそちらを優先しましょう。