htmlの斜体「emタグ」とは? strongタグとの違いを解説!

この記事は上記のような疑問を解消するものとなっています。

em要素はemphasisの略で、テキストの強調したいときに使用します。

Webブラウザのデフォルトスタイルではマークアップされたテキストが斜体（イタリック）で表示されます。

そこでこの記事ではem要素について解説していきます。

よく使用する要素の一つなのでしっかりと理解して使い方をマスターしておきましょう!

気になる方は是非最後まで読んで頂ければと思います。

1.em要素とは?

em要素は強調させたい場合に使用します。

<em>~</em>で囲んだ部分が斜体（イタリック）で表示されます。

デフォルトで「font-style: italic」が適用されています。

em要素を使用する際は「見出しに使用しない」、「たくさん使いすぎない」という点に注意しましょう。

見出しは見出しタグ（h1~h6）があるのでそちらのタグを使いましょう。

また、コンテンツ内で強調したい部分がある場合、em要素をたくさん使いすぎるのは避けましょう。

斜体（イタリック）が多くなるとユーザーにとって読みづらくなってしまいます。

そのため、本当に強調したいときにem要素を使うことをオススメします。

2.em要素の使い方

em要素の使い方をみていきましょう。

em要素を使うことで文章をより強調することができます。

<p>私は<em>リンゴ</em>が好きだ!</p>

上記では「リンゴ」をem要素で囲み、強調しています。

この「リンゴ」は斜体（イタリック）で表示されます。

ただし、斜体で表示する目的でem要素を使うことは避けましょう。

もし、文章を斜体で表示する必要があれば、CSSのfont-styleプロパティで行うようにしましょう。

3.em要素とstrong要素の違い

「em要素とstrong要素の違いは何なの?」という疑問に思っている方が多いのでまとめてみました。

em要素は強調を表現したいときに使用します。

強調することによって意味や文脈を変えるときに使えます。

一方、strong要素は強い重要性、深刻性、緊急性を表現したいときに使用します。

strong要素は一般的なブラウザでは太字で表示されます。

何をどのように伝えたいかによってどちらの要素を使うのか変わるので、正解はありません。

em要素とstrong要素は、よくごちゃ混ぜになりやすいですが、意識して使い分けましょう。

「HTML5/CSS3モダンコーディング フロントエンドエンジニアが教える3つの本格レイアウト スタンダード・グリッド・シングルページレイアウトの作り方」はHTML5/CSS3を使ってモダンなサイトを制作するためのコーディングテクニックをハンズオン形式で学ぶ本です。

実践的な内容になっているので次のステップに進みたいという方は是非利用してみてはいかがでしょうか!?

HTMLやCSSを利用してWebサイト制作の副業に挑戦してみたいという方はいませんか!?

そんな方に「はじめての副業コース」をオススメします。

なんとHTMLやCSSを学べるだけでなく、案件紹介も行ってくれます!

Webサイト制作で稼ぎたいという方は是非「はじめての副業コース」を受講してみてはいかがでしょうか!?