Day 2: テキストの構造化
今日学ぶこと
- 見出し要素（h1〜h6）の適切な使い方
- 段落とテキストのグループ化
- テキストの強調と装飾
- 引用とコードの表示
見出し要素
HTMLには6段階の見出し要素があります。<h1>が最も重要で、<h6>が最も小さい見出しです。
<h1>メインタイトル（h1）</h1>
<h2>セクション見出し（h2）</h2>
<h3>サブセクション（h3）</h3>
<h4>小見出し（h4）</h4>
<h5>詳細見出し（h5）</h5>
<h6>最小見出し（h6）</h6>
flowchart TB
subgraph Hierarchy["見出しの階層構造"]
H1["h1: ページタイトル"]
H2A["h2: セクション1"]
H2B["h2: セクション2"]
H3A["h3: サブセクション"]
H3B["h3: サブセクション"]
end
H1 --> H2A
H1 --> H2B
H2A --> H3A
H2B --> H3B
style H1 fill:#ef4444,color:#fff
style H2A fill:#f59e0b,color:#fff
style H2B fill:#f59e0b,color:#fff
style H3A fill:#22c55e,color:#fff
style H3B fill:#22c55e,color:#fff
見出しのルール
| ルール | 説明 |
|---|---|
| h1は1ページに1つ | ページの主題を示す |
| 階層をスキップしない | h1→h3のように飛ばさない |
| 見た目のために使わない | 大きい文字が欲しいだけならCSSを使う |
| 意味を重視する | 検索エンジンやスクリーンリーダーが利用する |
注意: 見出しレベルをスキップする（例：
<h1>の直後に<h3>を使う）のは、HTMLの仕様では禁止されていませんが、アクセシビリティの観点から推奨されません。
段落とテキストのグループ化
段落（<p>）
テキストの段落には<p>要素を使います。
<p>HTMLは、Webページの構造を定義するマークアップ言語です。</p>
<p>すべてのモダンブラウザがHTMLをサポートしています。</p>
ポイント: HTMLでは、ソースコード内の改行や連続するスペースは無視されます。段落を分けるには
<p>タグを使います。
改行（<br>）
段落内で改行したい場合は<br>を使います。<br>は空要素（終了タグなし）です。
<p>
東京都渋谷区<br>
〇〇ビル3F<br>
株式会社サンプル
</p>
水平線（<hr>）
セクション間の区切りには<hr>を使います。これも空要素です。
<p>第1章の内容...</p>
<hr>
<p>第2章の内容...</p>
プリフォーマットテキスト（<pre>）
スペースや改行をそのまま保持して表示するには<pre>を使います。
<pre>
名前: 田中太郎
年齢: 30歳
住所: 東京都
</pre>
テキストの強調と意味づけ
強調系の要素
<p>これは<strong>非常に重要な</strong>テキストです。</p>
<p>これは<em>強調された</em>テキストです。</p>
<p>これは<mark>ハイライトされた</mark>テキストです。</p>
| 要素 | 意味 | 表示 |
|---|---|---|
<strong> |
重要性が高い | 太字 |
<em> |
強調（ニュアンスの変化） | 斜体 |
<mark> |
ハイライト | 黄色背景 |
<b> |
見た目の太字（意味なし） | 太字 |
<i> |
見た目の斜体（専門用語等） | 斜体 |
重要:
<strong>と<b>は見た目が同じですが、意味が違います。<strong>は「この内容が重要」という意味を持ち、<b>は単に見た目を太字にするだけです。スクリーンリーダーは<strong>を強調して読み上げます。
flowchart LR
subgraph Semantic["✅ セマンティック"]
S1["<strong> = 重要"]
S2["<em> = 強調"]
end
subgraph Visual["⚠️ 見た目のみ"]
V1["<b> = 太字"]
V2["<i> = 斜体"]
end
style Semantic fill:#22c55e,color:#fff
style Visual fill:#f59e0b,color:#fff
その他のテキスト要素
<p><small>注意事項: この情報は変更される場合があります。</small></p>
<p>H<sub>2</sub>O（水の化学式）</p>
<p>E = mc<sup>2</sup>（アインシュタインの公式）</p>
<p><del>旧価格: 5,000円</del> → <ins>新価格: 3,980円</ins></p>
<p><abbr title="HyperText Markup Language">HTML</abbr>を学びましょう。</p>
| 要素 | 用途 |
|---|---|
<small> |
注釈、免責事項 |
<sub> |
下付き文字（化学式など） |
<sup> |
上付き文字（べき乗など） |
<del> |
削除されたテキスト |
<ins> |
追加されたテキスト |
<abbr> |
略語（titleで正式名称を表示） |
引用
ブロック引用（<blockquote>）
<blockquote cite="https://example.com/source">
<p>Webの力は、その普遍性にある。障害の有無に関わらず、
誰もがアクセスできることが本質的な側面だ。</p>
<footer>— <cite>ティム・バーナーズ＝リー</cite></footer>
</blockquote>
インライン引用（<q>）
<p>ティム・バーナーズ＝リーは
<q>Webの力は、その普遍性にある</q>と述べました。</p>
| 要素 | 用途 | 表示 |
|---|---|---|
<blockquote> |
長い引用（ブロック） | インデントされた段落 |
<q> |
短い引用（インライン） | 引用符で囲まれる |
<cite> |
出典の表示 | 斜体 |
コードの表示
インラインコード（<code>）
<p><code>console.log()</code>でコンソールに出力できます。</p>
コードブロック
<pre><code>function greet(name) {
return "Hello, " + name;
}
console.log(greet("World"));
</code></pre>
キーボード入力とサンプル出力
<p>保存するには<kbd>Ctrl</kbd> + <kbd>S</kbd>を押します。</p>
<p>コンソール出力: <samp>Hello, World!</samp></p>
| 要素 | 用途 |
|---|---|
<code> |
プログラムコード |
<pre> |
整形済みテキスト |
<kbd> |
キーボード入力 |
<samp> |
プログラム出力 |
<var> |
変数名 |
実践: ブログ記事ページ
学んだ要素を使って、ブログ記事ページを作成しましょう。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTMLを学び始めた話</title>
</head>
<body>
<h1>HTMLを学び始めた話</h1>
<p><small>投稿日: 2026年1月29日</small></p>
<h2>きっかけ</h2>
<p>自分のWebサイトを作りたいと思い、<strong>HTML</strong>の学習を始めました。</p>
<blockquote>
<p>千里の道も一歩から</p>
</blockquote>
<h2>今日学んだこと</h2>
<p><em>テキストの構造化</em>について学びました。
特に<mark>セマンティックな要素の使い分け</mark>が重要だと感じました。</p>
<h3>コード例</h3>
<pre><code><p>HTMLは<strong>楽しい</strong>！</p></code></pre>
<hr>
<p><small>© 2026 My Blog</small></p>
</body>
</html>
まとめ
| 概念 | 説明 |
|---|---|
| 見出し（h1〜h6） | 文書の階層構造を定義する |
| 段落（p） | テキストのブロックをグループ化 |
| strong / em | 意味を持った強調 |
| blockquote / q | 引用テキスト |
| code / pre | プログラムコードの表示 |
重要ポイント
- 見出しは階層構造を守って使う
<strong>と<b>は意味が異なる（セマンティクスを意識）- HTMLの改行は**
<br>や<p>**を使う（ソースの改行は無視される） - 適切な要素を使うことでアクセシビリティが向上する
練習問題
問題1: 基本
以下のテキスト要素をすべて使ったHTMLページを作成してください：
<h1>, <h2>, <p>, <strong>, <em>, <mark>
問題2: 応用
好きな名言を3つ、<blockquote>を使って表示するページを作成してください。各引用に出典（<cite>）も含めましょう。
チャレンジ問題
化学式（H₂O、CO₂など）と数学の式（E=mc²、a²+b²=c²）を正しく表示するHTMLページを作成してください。
参考リンク
次回予告: Day 3では「リンクとナビゲーション」について学びます。Webの核心である「ハイパーリンク」の仕組みをマスターしましょう。