HTML・文章にひと工夫

文字を強調しよう

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

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

大事なところはstrong

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

<p>お会計は <strong>現金のみ</strong> でお願いします。</p>

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

声色を変えるならem

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

<p>これは <em>本当に</em> おすすめの一冊です。</p>

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

このレッスンのまとめ

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

強調は、使いすぎると逆に何が大事か分からなくなります。ここぞ、という一言にだけ。これで、あなたの文章に“強弱”がつきました。 :::

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

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

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

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

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