今回の概要と目標 0:16

WEBサイトを作っていると「今だけ送料無料」などのように文章の一部を強調したり、重要性を示したいことがあります。これらの様に文章の中で一部の単語や文章などに使うほとんどの要素はフレージング・コンテンツというカテゴリーに分類されます。今回はその中でもよく使う、強調を表すem要素、重要性を表すstrong要素を学びましょう。

強調は、em要素で表す 1:09

em要素は、emphasis（エンファサイズ）の略で強調したいテキストに利用します。
強調する箇所によって意味やニュアンスが変わります。

カテゴリ

• フロー・コンテンツ
• フレージング・コンテンツ

コンテンツ・モデル

フレージング・コンテンツ

em要素のサンプル

em要素は強調したい文章や言葉を、<em>タグ 〜 </em>タグで挟みます。

<p>伝説のWebクリエーターに、<em>おれは</em>なる！</p>

一般的なブラウザは、em要素でマークアップした箇所を斜体で表示します。
ただし、あくまで強調を表す要素なので、斜体にすることが目的の場合は、CSSで行うようにして下さい。 （日本語フォントの場合、斜体にならないものもあります。）

注意点

em要素はマークアップする箇所によって文章の意味やニュアンスが変わります。
上記の例では他の誰でもなく "俺が" 伝説のWebクリエーターになるというニュアンスになります。もし、「伝説の<em>Webクリエーターに</em>、おれはなる」という様にマークアップした場合は、他のどんな職業でもなく伝説の "Webクリエーター" になるというニュアンスになります。

重要性は、strong要素で表す 4:47

strong要素は重要性の高いテキストに利用します。
em要素と違って文章の意味を変えてしまうことはありません。

カテゴリ

• フロー・コンテンツ
• フレージング・コンテンツ

コンテンツ・モデル

フレージング・コンテンツ

strong要素のサンプル

strong要素は重要なメッセージを、<strong>タグ 〜 </strong>タグで挟みます。

<p><strong>酸性タイプの製品と一緒に使う（まぜる）と有害な塩素ガスが出て危険</strong></p>

一般的なブラウザは、strong要素でマークアップした箇所を太字で表示します。
ただし、あくまで重要を表す要素なので、太字にすることが目的の場合は、CSSで行うようにして下さい。

em要素とstrong要素を使ってみよう 7:11

それでは、文書内でよく強調や重要性をマークアップしてみましょう。

1. 「Chapter08」フォルダ内の「index.html」をテキストエディタで開く
2. 下記を参考に、em要素、strong要素をマークアップする

<h1>ボブからのお願い</h1>
<p>
  ボブから「父親が経営している会社のWEBサイトの更新を手伝って欲しい」と頼まれた。

  ただ、僕は<em>まだ</em>、ボブの期待に応えられないかもしれない。

  だが、<strong>今できる精一杯の対応をすることが大切</strong>だと考えて、

  引き受けることにした。
</p>

3. 上書き保存し、ブラウザで確認

練習問題 10:09

「Chapter08」 › 「quest」フォルダ内の「index.html」を開いて下記の問題を解いてみましょう。なお、解けた問題は問題文の横のチェックボックスをオンにしましょう。

まとめ 13:57

em 要素や、strong 要素の使い方はわかりましたか？

• 強調は、em 要素で表す
• 重要性は、strong 要素で表す
• em要素は、伝わるニュアンスが変わる