段落とテキスト装飾
ストーリー
先輩「見出しが書けたら、次は本文だね。段落タグとテキスト装飾を覚えよう」
段落って、ただテキストを書けばいいんじゃないですか？
先輩「HTMLでは改行やスペースが無視されるんだ。だからタグで段落を作る必要があるよ」
段落タグ <p>
段落（パラグラフ）を作るタグです。
html
<p>これは1つ目の段落です。文章をまとめるために使います。</p>
<p>これは2つ目の段落です。段落の間には自動的に余白が入ります。</p>HTMLの改行ルール
HTMLでは、コード内の改行やスペースは 無視 されます。
html
<!-- コードでは改行しているが... -->
<p>これは
長い
文章です。</p>
<!-- ブラウザでは1行で表示される -->
<!-- → これは 長い 文章です。 -->テキストを別の段落にしたい場合は、別の <p> タグを使います。
改行タグ <br>
段落の中で改行したいときに使います。
html
<p>
山田太郎<br>
東京都渋谷区<br>
090-1234-5678
</p><p> と <br> の使い分け
| 状況 | 使うタグ |
|---|---|
| 意味的に別の段落 | <p> を分ける |
| 同じ段落内での改行 | <br> を使う |
html
<!-- 別の話題 → <p> を分ける -->
<p>HTMLは構造を作る言語です。</p>
<p>CSSは見た目を整える言語です。</p>
<!-- 住所の改行 → <br> を使う -->
<p>
〒150-0001<br>
東京都渋谷区神宮前1-1-1
</p>テキスト装飾タグ
重要なテキスト <strong>
html
<p>この項目は<strong>必須</strong>です。</p>- テキストが 太字 で表示される
- 「重要である」という 意味 を持つ
強調テキスト <em>
html
<p>締め切りは<em>明日</em>です。</p>- テキストが 斜体 で表示される
- 「強調している」という 意味 を持つ
<strong> と <em> の違い
| タグ | 見た目 | 意味 |
|---|---|---|
<strong> | 太字 | 重要性が高い |
<em> | 斜体 | 強調・ニュアンスの変化 |
汎用インライン要素 <span>
html
<p>価格は<span>1,000円</span>です。</p>- 見た目の変化は なし
- CSSと組み合わせてスタイルを当てるために使う
- 意味を持たない 汎用的な インライン要素
html
<!-- CSSで色を変える例（Step 4で学びます） -->
<p>価格は<span style="color: red;">1,000円</span>です。</p>その他のテキスト関連タグ
| タグ | 用途 | 表示 |
|---|---|---|
<b> | 太字（意味なし） | 太字 |
<i> | 斜体（意味なし） | 斜体 |
<u> | 下線 | 下線付き |
<s> | 取り消し線 | |
<small> | 小さい文字 | 小さい文字 |
<mark> | ハイライト | 黄色背景 |
<sub> | 下付き文字 | H₂O |
<sup> | 上付き文字 | X² |
先輩「
<strong>と<b>は見た目が同じだけど、<strong>は『重要』という意味があるんだ。意味のあるタグを優先して使おう」
実践：段落とテキスト装飾を使おう
html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>段落とテキスト装飾</title>
</head>
<body>
<h1>自己紹介</h1>
<h2>基本情報</h2>
<p>名前: <strong>山田太郎</strong></p>
<p>
住所:<br>
〒150-0001<br>
東京都渋谷区
</p>
<h2>自己PR</h2>
<p>私は<em>プログラミングが大好き</em>で、毎日勉強しています。</p>
<p>特に<strong>Web開発</strong>に興味があり、HTMLとCSSを学んでいます。</p>
<h2>注意事項</h2>
<p><small>このページは練習用です。</small></p>
<p>旧価格: <s>5,000円</s> → 新価格: <mark>3,000円</mark></p>
</body>
</html>まとめ
| ポイント | 内容 |
|---|---|
<p> | 段落を作る。段落間に余白が入る |
<br> | 段落内で改行する |
<strong> | 重要なテキスト（太字） |
<em> | 強調テキスト（斜体） |
<span> | CSS用の汎用インライン要 素 |
| 改行ルール | HTMLではコード内の改行は無視される |
チェックリスト
-
<p>タグで段落を作れる -
<br>と<p>の使い分けを理解した -
<strong>と<em>を正しく使える -
<span>の用途を理解した - テキスト装飾タグを使ったページを作成できた
次のステップへ
段落とテキスト装飾が書けるようになりました。次は、情報を整理して表示するのに便利なリストタグを学びましょう。
推定読了時間: 30分