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

今日は<strong>と<em>要素を使い分けてみましょう。
以前は、どちらも強調を表すものとされていましたが、HTML5で定義が少し変わって、
<strong>要素「重要性」を表し、 <em>要素「強調」を表す、と区別されたんですと。

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

「em」とは「emphasis」の略。直訳で「強調」「力説」。
「strong」は、そりゃーそのまんまストロングです。

<strong>も<em>も大昔からある要素で、どのブラウザも対応しています。
普通ブラウザでは<strong>は太字で、<em>はイタリックで表示されます。
こんなかんじです。

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

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

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

<strong>と<em>の違い

<strong>も<em>も大昔からある要素ですが、
HTML5から、下記のように使い分けるように定義づけられました。

<strong>は「重要性」を表す。使う部分で文章の意味は変更されない
<em> は「強調」を表す。<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>を使ったりしないで、
要素の意味を意識してマークアップしましょう。
太くしたい時は<b>、イタリックにしたい時は<i>要素が使えます。とはいえ<b>も<i>もちゃんとした要素としての意味があり、太くしたりイタリックにするために存在するのではないけど。
これは近いうちにアップします。

<b>と<i>について、記事をアップしました。(2011年9月8日追記)
「[23] <b><i><small>もまだ使えます」をご覧ください。

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

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

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

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

最近よく「レンタルサーバーはどこがいい?」とご質問が来ます。
自分でも使っていてオススメなのはミニバード。管理画面がわかりやすくていい感じす。
仕事で使ってるロリポップもわかりやすい管理画面で、初めてでもすんなり使えると思います。
両方とも、なんといっても料金が安いです。初めてだとなるべく安いほうがイイですからね。

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

レンタルサーバーは、たくさんあり過ぎて迷いますよね。近いうちに、初心者にも良さげなサーバーについて記事にまとめます。*記事をアップしたらココにもリンクを貼ります。

スポンサーリンク

コメントの投稿

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
03 | 2017/04 | 05
- - - - - - 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 - - - - - -
Archive
RSS Link
Profile

yuki★hata

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

メールフォームはこちら

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