HTML・文章にひと工夫

文字を強調しよう

「ここは大事!」と伝えたいとき。strongとemを使って、文章の一部だけをそっと目立たせる方法を覚えよう。

文章を書いていると、「ここだけは読みとばさないでほしい」という一言、ありますよね。そんなときに使うのが、文字を強調するタグ。今回は代表的な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を使ってもいいですか?
使えます。見出しの中の一部分だけをさらに強調したいときに使えますが、見出し自体がすでに目立つ文字なので、本当に必要なときだけにしましょう。