🚀 プログラミング学習

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

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

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

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

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

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

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

セクションを分ける：<div>

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

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

文中の一部を指定する：<span>

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

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

id と class 属性

<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コースで本格的に使い方を学びます！

💻 やってみよう！

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

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>divとspanの練習</title>
  </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を当てる準備ができた状態です！

📌 まとめ

🚀 次のコースへ

HTMLコースはこれで完了です！次はCSSコースで、今回作ったページに色やレイアウトを加えていきましょう！ 🎉

🎉 HTMLコース完了！次は CSS でこのページをおしゃれにデザインしよう。CSSコースへ →
🔍 もっと調べてみよう：「HTML div span 違い」で検索してみよう。わからないことはどんどん検索する習慣をつけよう！
CSSコースを始める →
← HTMLコース一覧に戻る