[21] 重要性を示す strong要素 と強調を示す em要素を使い分けよう

最終更新日:2017年11月02日  (初回投稿日:2011年08月30日)

今回は <strong>要素<em>要素を使い分けてみましょう。

以前(HTML4、XHTML1)は、どちらも強調を表すものとされていました。
が、HTML5で定義が少し変わって、
<strong>要素重要性 <em>要素強調 を表すと区別されました。

使用する要素 <strong> 〜 </strong>
<em> 〜 </em>

「em」は「emphasis(エンファシス)」の略。「強調」「力説」といった意味です。
「strong」は、そりゃーそのまんまストロングです。

<strong> も <em> も大昔からある要素で、どのブラウザも対応しています。
ブラウザのデフォルトスタイルでは <strong> は太字で、<em> はイタリック(斜体)で表示されます。
こんなかんじです。

重要性を示したいテキスト
強調したいテキスト

HTMLはこちらです。囲むだけでとても簡単。

<strong>重要性を示したいテキスト</strong><br>
<em>強調したいテキスト</em>

文字を太くしたいから<strong> を使ったり、イタリックにしたいから<em>を使ったりしないで、要素の意味を理解してマークアップしましょう。

スタイルの指定は必ず CSSを使います。 文字を太くしたいなら「font-weight: bold」、イタリックにしたいなら「font-style: italic」か「font-style: oblique」を使います。

<strong> と <em>の違い

<strong> と <em> は、HTML5から下記のように使い分けるよう定義づけられました。

<strong>は「重要性」を表す。使う部分で文章の意味は変更されない
<em> は「強調」を表す。使う部分によって文章の意味が変わる

って言われても…、なんだかわっかんないですよね。順番に説明します。

重要性を表す<strong>

<strong>強烈にアピールすべきところに使います。こんなかんじで↓。

混ぜるな危険
酸性タイプの製品と一緒に使う(まぜる)と有害な塩素ガスが出て危険です。

HTMLはこちらです

<strong>混ぜるな危険</strong><br>
酸性タイプの製品と一緒に使う(まぜる)と有害な<strong>塩素ガスが出て危険</strong>です。

<strong> の入れ子でさらに重要度アップ

<strong>入れ子にすることもできます。入れ子の階層が深いほど重要性も高くなります。
こんなかんじで↓(見た目はあんまり変わりませんけどね)

混ぜるな危険_塩素系漂白剤
酸性タイプの製品と一緒に使う(まぜる)と有害な塩素ガスが出て危険です。

HTMLはこちらです

<strong><strong>混ぜるな危険</strong>_塩素系漂白剤</strong><br>
酸性タイプの製品と一緒に使う(まぜる)と有害な<strong>塩素ガスが出て危険</strong>です。

「塩素系漂白剤」「塩素ガスが出て危険」より「まぜるな危険」のほうが階層が深いので、より重要ということですね。

「文章の意味が変更されることは無い」のですが、
これは<em>との比較論なので、とにかく次の <em> を見てみましょう。

強調を表す<em>

<em> も、 <strong>ほどではないけど、強めにアピールしたいところに使うんですが。
ただ「ひとつの文章の中で、使う部分によってその文章の意味合いが変わってくる」という性格を持つようになったんだそうです。
下のサンプルを見てください。

日本の新幹線は速くて安全です。
日本の新幹線は速くて安全です。
日本の新幹線は速くて安全です。
(わかりやすいように<em>でマークアップした文字を紫色にしています)

1行目は「速くて安全」を強調して、性能をアピール。
2行目は「新幹線」を強調し、車や飛行機など「他の交通手段よりも」をアピール。
3行目は「日本の」を強調して、ほかの国よりも「日本は大丈夫」ってアピール。

こんな具合で、口語(話し言葉)のとき「相手に伝えたい意味合いによって、ちょっと大きめに強調してしゃべる」ようなニュアンスで使います。

こんなわけで <em> は「使う場所によって文章の意味が変わる」と定義されているのです。で、<strong>はこんなふうに意味は変わらないんだって。

ちなみに上の新幹線サンプルのHTMLはこちらです

日本の新幹線は<em>速くて安全</em>です。<br >
日本の<em>新幹線</em>は速くて安全です。<br />
<em>日本の</em>新幹線は速くて安全です。

<em>の入れ子でさらに強調

<em>入れ子にすることができます。入れ子の階層が深いほど強調されます。

日本の新幹線は速くて安全です。
(わかりやすいように<em>でマークアップした文字を赤くしています。)

HTMLはこちらです

<em>日本の新幹線は<em>速くて安全</em></em>です。

「日本の新幹線」より「速くて安全」のほうが階層が深いので、より強調されます。

<strong> と <em> の比較まとめ

まとめです。

・強度は、 <strong> > <em>
・両方とも「入れ子」で使えて、入れ子の階層が深いほど強くなる
・ <em> は使う部分によって文章の意味が変わる(<strong>は変わらない)

次回予告

さて次回は、HTML5から新しく加わった <mark> 要素を使ってみましょう。
<mark> も <strong> や <em> と同類で、読んでる人に強めにアピールしたいところに使います。
でも <strong> や <em> とは意味が違う…。詳細は次回。

関連記事
この記事をはてなブックマークに追加

やる気を保つためにランキングに参加しています。
応援してくださると すっごいやる気を出します! (笑)

初心者にも使いやすい(と思う)レンタルサーバー

「レンタルサーバーはどこがいい?」とご質問をよくいただきますが、自分でも使っていてオススメなのは スターサーバー (ミニバードがスターサーバになりました)。管理画面がわかりやすくていい感じす。
仕事で使ってるロリポップ!もわかりやすい管理画面で、初めてでもすんなり使えます。
両方とも、なんといっても料金が安いです。

ちょっと料金は高いけど、高スペックでコスパが良く、信頼性も高いサーバといえば、やはりさくらのレンタルサーバと、エックスサーバー 。この2つは老舗でユーザーも多いので、質問する場がたくさんあり、初心者の方でもイケるだろうと思います。

スポンサーリンク

コメントの投稿

ご注意:メールアドレスは書かないで
「コメントを送信する」ボタンを押した後の「確認画面」で、メールアドレス・URL などを入力できるようになっており、メールアドレス・URL は、そのままオートリンクになる仕様です。
当方でメールアドレスだけ削除することも、メールアドレスを非公開にすることもできません
メールアドレスは書かないでください。詳しくはこちらにまとめましたのでご覧ください。

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
04 | 2018/05 | 06
- - 1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30 31 - -
Archive
RSS Link
Profile

yuki★hata

Author : yuki★hata
せめて月1回の更新をめざします~。

メールフォームはこちら

スポンサーリンク
スポンサーリンク
Copyright © ほんっとにはじめてのHTML5とCSS3 All Rights Reserved.