段落、em、strong、b、i
意味に基づく強調と太字のタグを使って文章をマークアップします。
「段落、em、strong、b、i」はCoddyKit上の無料HTML Academyレッスンです。 これはレッスン2/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはHTML Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 HTML Academyコースには全4レッスンが含まれています。
段落要素
<p>要素は、テキストのまとまりを段落として示します。
<p>This is a paragraph of text. Browsers add margin above and below paragraphs automatically.</p>
<p>This is a second paragraph. It starts on a new line.</p>セマンティックな強調：em
<em>要素は、強勢による強調、つまり文の意味を変える語を示します。
<p>I <em>never</em> said she stole the money.</p>
<p>I never said <em>she</em> stole the money.</p>
<!-- Same words, different meaning depending on which is emphasized -->
<!-- Screen readers change inflection on em content -->セマンティックな重要性：strong
<strong>要素は、テキストが非常に重要であることを示します。
<p><strong>Warning:</strong> Do not enter this area without protective equipment.</p>
<p>The deadline is <strong>Friday at 5 PM</strong>.</p>
<!-- strong = this content is more important than surrounding text -->
<!-- Screen readers may emphasize strong content differently -->emとiの違い
<em>と<i>は、どちらもデフォルトでは斜体で表示されますが、意味は異なります。
<em>— セマンティックな強勢による強調（通常はこちらを使用）<i>— 表示上の斜体：技術用語、タイトル、外国語のフレーズなど
<p>The ship was called <i>HMS Beagle</i>.</p>
<p>The CSS property is <i>display</i>.</p>
<p><em>Please</em> be careful.</p>strongとbの違い
<strong>と<b>は、どちらもデフォルトでは太字で表示されますが、セマンティックな意味が異なります。
<strong>— セマンティックな重要性（通常はこちらを使用）<b>— 重要性を示さずに注意を引く：キーワード、製品名など
<p>The product is called <b>ProSuite</b>.</p>
<p><b>Note:</b> All fields are required.</p>
<p>This step is <strong>critical</strong> — do not skip it.</p>emとstrongのネスト
強調要素はネストして、効果を組み合わせることができます。
<p>This is <strong>very <em>important</em></strong>.</p>
<!-- strong (important) wraps em (stressed) -->
<!-- Result: bold italic text with both semantic meanings -->段落はネストできない
<p>要素の中に別の<p>を含めることはできません。
<!-- INVALID: nested paragraphs -->
<p>First paragraph <p>nested paragraph</p></p>
<!-- The browser auto-closes the first p before the second opens -->
<!-- Always use separate paragraph tags -->
<p>First paragraph.</p>
<p>Second paragraph.</p>段落内のインライン要素とブロック要素
<p>は、インライン要素だけを含めることができるブロック要素です。
<!-- Valid: inline content in p -->
<p>Text with <strong>bold</strong> and <a href="/">a link</a>.</p>
<!-- INVALID: block element inside p -->
<p>
<div>A div inside p is invalid</div>
</p>強調のアクセシビリティ
セマンティックなマークアップが支援技術にとって重要である理由：
- 一部の実装では、スクリーンリーダーが
<em>を異なる抑揚で読み上げます <strong>は、追加の強調を付けて読み上げられる場合があります- CSSだけによる太字や斜体（例：spanに
font-style: italicを指定する方法）には、スクリーンリーダーにとってセマンティックな意味がありません
よくある間違い
次のような、よくあるテキストマークアップの誤りを避けてください。
<!-- Bad: using br for paragraph spacing -->
First paragraph<br><br>Second paragraph
<!-- Good: use p elements -->
<p>First paragraph</p>
<p>Second paragraph</p>
<!-- Bad: bold for visual style only -->
<b>Heading Text</b>
<!-- Good: use h elements for headings -->
<h2>Heading Text</h2>各要素を使う場面
簡単な判断ガイド：
- 文章のまとまり →
<p> - 意味を変える語を強調する →
<em> - 重要な情報を示す →
<strong> - タイトルや技術用語を斜体にする →
<i> - 重要性を示さずにキーワードに注意を引く →
<b>
確認問題
テキストが非常に重要であることを示すには、どの要素を使用すべきでしょうか。
まとめ：テキストのセマンティクス
テキストマークアップのまとめ：
<p>— 文章の段落<em>— 文の意味を変える強勢による強調<strong>— 非常に高い重要性<i>— 表示上の斜体（タイトル、用語など）<b>— 重要性を示さずに注意を引く- 段落間の間隔に
<br><br>を使用しない
よくある質問
「段落、em、strong、b、i」レッスンは無料ですか？
はい。「段落、em、strong、b、i」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、HTML Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 HTML Academyコースには全4レッスンが含まれています。
「段落、em、strong、b、i」で何を学びますか？
意味に基づく強調と太字のタグを使って文章をマークアップします。 ブラウザで直接実行するハンズオンコードでHTML Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
HTML Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのHTML Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン2/4です。
「段落、em、strong、b、i」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このHTML Academyレッスンでコードを書いて実行できますか？
はい。すべてのHTML Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- 見出しh1〜h6とその階層
- 段落、em、strong、b、i
- br、hr、blockquote、pre
- span要素とdiv要素