HTML・文章にひと工夫

文字を強調しよう

strongとemで文章の一部を強調する方法。大事なところを示すstrong、声色を変えるように強調するemの違い、2つを重ねる書き方、強調を使いすぎないコツを、表示の違いとあわせて紹介します。

文章を書いていると、「ここだけは読みとばさないでほしい」という一言、ありますよね。そんなときに使うのが、文字を強調するタグ。今回は代表的な2つ、<strong>と<em>を覚えます。

大事なところはstrong

<strong>は「ここは重要だよ」という意味を持つタグです。多くのブラウザでは、はさんだ文字が太字で表示されます。

<p>お会計は <strong>現金のみ</strong> でお願いします。</p>
「現金のみ」の部分だけが太字になって、パッと目に入ります。

こうすると「現金のみ」だけが太くなり、パッと目に入ります。ただの飾りではなく「重要」という意味を持たせている、というのがポイントです。

声色を変えるならem

<em>はemphasis(強調)の略。「ここは少し力を込めて読んでね」というニュアンスのタグで、多くのブラウザでは斜体(イタリック)で表示されます。

<p>これは <em>本当に</em> おすすめの一冊です。</p>
「本当に」の部分だけが斜体(イタリック)になって、少しかたむいて見えます。

声に出して読むとき、「“本当に”おすすめ」と少し強く読む、あの感じです。<strong>が「重要」なら、<em>は「言い方のニュアンス」。使い分けは、慣れてくれば自然と分かってきます。

2つを重ねて使う

「重要でもあり、言い方にも力を込めたい」ときは、<strong>と<em>を入れ子にして重ねられます。

<p><strong><em>絶対に</em>忘れないでください。</strong></p>
「絶対に」の部分は太字と斜体が両方かかって、いちばん強く見えます。

太字と斜体が両方かかった見た目になり、「重要」と「ニュアンス」の両方の意味を持たせられます。ただし、これはここぞという場面だけの合わせ技。ふだんは<strong>か<em>のどちらか一方で十分です。

このレッスンのまとめ

  1. とくに大事なところは<strong>(多くは太字になる)
  2. 言葉に力を込めたいところは<em>(多くは斜体になる)
  3. どちらも「見た目」ではなく「意味」で選ぶ

やってみよう:じこしょうかいを強調

しまちゃんのページのじこしょうかいで、いちばん伝えたい言葉を<strong>で強調しましょう。

<h2>じこしょうかい</h2>
<p>こんにちは! しまちゃんといいます。おえかきするのが<strong>だいすき</strong>で、しゅうまつはよくラーメンをたべにいきます。</p>

<h2>と<p>は前のレッスンで書いたぶん。今回足すのは、文の中の<strong> … </strong>だけ。囲んだ「だいすき」が太字になります。

ブラウザ表示。「じこしょうかい」の見出しの下の文で、「だいすき」だけが太字になっている
「だいすき」だけが太くなって、パッと目に入ります。

強調は、使いすぎると逆に何が大事か分からなくなります。ここぞ、という一言にだけ。

よくある質問

strongやemは1つの文章で何回使ってもいいですか?
回数の決まりはありませんが、使いすぎるとどこが本当に大事なのか伝わりにくくなります。ここぞという一言にだけ使うのがコツです。
strongの中にemを入れるなど、組み合わせて使えますか?
使えます。2つを重ねると「重要でありニュアンスも込めたい」場所を表せます。ただし多用すると読みにくくなるので、ここぞという場面だけにしましょう。
見出し(h1やh2)の中にstrongやemを使ってもいいですか?
使えます。見出しの中の一部分だけをさらに強調したいときに使えますが、見出し自体がすでに目立つ文字なので、本当に必要なときだけにしましょう。