はじめに
この記事を読めば、HTML emタグを使った効果的なウェブページ作成ができるようになります。
●HTML emタグとは
HTML emタグは、文章の中で強調したい部分に使用します。
emタグを使うことで、通常のテキストとは異なるスタイルを適用でき、視覚的に目立たせることができます。
●emタグの基本
emタグは、下記のように使用します。
<em>強調したいテキスト</em>○サンプルコード2：emタグの入れ子構造
<p>emタグは、<em>入れ子構造<em>も</em>可能</em>です。</p>●emタグの応用例
○サンプルコード3：emタグとstrongタグを組み合わせる
<p><strong><em>重要な情報</em></strong>を強調表示することができます。</p>○サンプルコード4：emタグでリストの項目を強調する
<ul>
<li><em>リストの項目1</em></li>
<li>リストの項目2</li>
<li>リストの項目3</li>
</ul>○サンプルコード5：emタグで見出しを強調する
<h2>見出しの中の<em>キーワード</em>を強調表示する</h2>○サンプルコード6：emタグで引用文を強調する
<blockquote>
<p><em>引用文の重要な部分</em>を強調表示することができます。</p>
</blockquote>○サンプルコード7：emタグでテーブルのセルを強調する
<table>
<tr>
<th>項目</th>
<th>説明</th>
</tr>
<tr>
<td><em>重要な項目</em></td>
<td>この項目は特に重要です。</td>
</tr>
<tr>
<td>通常の項目</td>
<td>この項目は通常の重要度です。</td>
</tr>
</table>○サンプルコード8：emタグでフォームの説明文を強調する
<form>
<label for="email">メールアドレス：<em>必須</em></label>
<input type="email" id="email" required>
</form>○サンプルコード9：emタグで画像のキャプションを強調する
<figure>
<img src="example.jpg" alt="例の画像">
<figcaption><em>重要なキャプション</em>がここに入ります。</figcaption>
</figure>○サンプルコード10：CSSでemタグのスタイルをカスタマイズする
<style>
em {
font-style: normal;
font-weight: bold;
color: red;
}
</style>
<p><em>カスタマイズされたemタグのテキスト</em></p>●注意点と対処法
emタグは、文章の中で意味的な強調を表現するために使用されるべきです。
視覚的な強調のみを目的とした場合は、CSSを使用してスタイルを適用することをおすすめします。
●カスタマイズ方法
emタグのデフォルトのスタイル（イタリック体）以外にも、CSSを使って様々なスタイルを適用することができます。
例えば、フォントの太さや色を変更したり、下線を付けたりすることができます。
まとめ
この記事では、HTML emタグの基本的な使い方から応用例まで、10のサンプルコードを通して詳しく解説しました。
注意点やカスタマイズ方法も押さえておくことで、より効果的なウェブページ作成ができるでしょう。
