こんなことに悩んでいませんか？
文字の見た目を斜体にするemタグですが、使うルールがわからず何となく使っている方、けっこう多いのではないでしょうか？
という訳で今回は、そんなemタグについてよく理解していない方に向けて、
・類似タグとの違いと使い分け
・CSSで文字を斜体にする方法
について解説していきます。
emタグを始め、他のhtmlタグについてもきちんと理解することで、文章の意味や目的によって使い分けたり、htmlのルールに沿った正しい文章を作ることができるようになります。
html初心者さんや、emタグの使い方を知りたい人は、ぜひ最後までご覧ください。
目次
emタグとは
emタグの読み方
emタグは【emphasis(エンファシス)】の略で「イーエムタグ」と読むことが一般的です。
日本語では【強調】などと訳されます。
emタグの説明
emタグはその言葉のとおり、emタグで囲った文章に【強調】の意味合いを持たせるタグで、文章を斜体にする効果があります。
もう少し具体的に言うと、GoogleやSafariなど、あなたが普段使っている【検索エンジン】に対して【この文章は注意して読んでほしい！】と伝える効果があり、文章の見た目だけでなく意味も強調するためのタグです。
と思う方も多いと思うので、【喫茶店でカフェラテを注文した。】という例文を使って説明しますね。
・“喫茶店”にemタグを使用
⇒カフェラテを注文したのは自販機等ではなく喫茶店であることを強調
・“カフェラテ”にemタグを使用
⇒喫茶店で注文したのはブレンド等ではなくカフェラテであることを強調
emタグを使用する場所によって、文章のニュアンス、捉え方が何となく変わるかと思います。
「どこに注意して読んでほしいのか？」そんなことを意識して使いましょう。
emタグで利用できる属性
emタグはグローバル属性のため、全てのHTML要素で使用可能です。
対応ブラウザ
emタグの対応ブラウザは以下のとおりです。
| PC用ブラウザ | 対応状況 |
|---|---|
| Chrome | 完全対応 |
| Edge | 完全対応 |
| Firefox | 完全対応 |
| nternet Explorer | 完全対応 |
| Opera | 完全対応 |
| Safari | 完全対応 |
| スマートフォン用ブラウザ | 対応状況 |
| Android webview | 完全対応 |
| Android版Chrome | 完全対応 |
| Android版Firefox | 完全対応 |
| Android 版 Opera | 完全対応 |
| iOS版Safari | 完全対応 |
| Samsung Internet | 完全対応 |
emタグの基本的な使い方
emタグの使い方
それではさっそくenタグの使い方について解説していきます。
とは言っても使い方はとってもカンタン。強調したい文章をemタグで囲むだけです。
|
1 2 3 4 5 6 7 |
<p> emタグの使い方はカンタン。\ <em> 強調したい文章をタグで囲むだけです。 </em> これでOK。 </p> |
結果はコチラ
emタグの使い方はカンタン。強調したい文章をタグで囲むだけです。これでOK。
カンタンでしたね。
ちなみによくある間違いですが、emタグは【強調】の意味を持たせるタグであって【重要性】を表すタグではありません。
次の見出しで詳しく解説していきますね。
emタグと類似する要素との違い
文字を斜体にするemタグですが、実は似たような効果や目的のタグがいくつかあります。
これまで何となく使っていた方も、きちんとその違いや使用ルールを理解し、今日から使い分けができるようになりましょう。
類似タグを一覧にまとめると次のとおり。
| 見た目と意味に働きかけ | 見た目のみに働きかけ | |
|---|---|---|
| 文字を斜体にする | emタグ | iタグ |
| 文字を太字にする | strongタグ | bタグ |
それぞれ解説していきますね。
iタグ
iタグは【italic（イタリック(体)、斜体）】の略で、emタグと同様にそのタグで囲った文章を【斜体】にするという効果があります。
emタグと違う点は、iタグにはGoogleなどの検索エンジンに対して文章の強調を伝える効果はなく、シンプルに文字を斜めにするだけということです。
iタグはあまり使用頻度の高くないタグですが、主に心の中の言葉や外国語、ことわざ、動植物の学名などに使われることが一般的ですね。
strongタグ
strongタグはその名のイメージどおり、タグで囲った文章を【太字】にする効果があるタグです。
また、emタグが【強調】の意味を検索エンジンに示すようにstrongタグは【重要性】の意味を示す役割もあります。
強調と重要の使い分けがいまいちピンとこない人もいるかと思いますが、以下のように使い分けをしましょう。
⇒「ここだけは読んでほしい！」など、太字部分だけを読んでも意味が通じる
・emタグ：記事の中で注意を引きたい部分
⇒「絶対に」、「すぐに」など、注目させたい、または際立たせたい一部分
strongタグが比較的長文に使われるのに対し、emタグは単語など部分的に使うイメージと覚えましょう。
bタグ
bタグは【bold（大胆な、力強い）】の略で、strongタグと同様に文字を太字にする効果があります。
strongタグとの違いは、bタグは文字をシンプルに太くするだけで、重要性を表すタグではないということです。
文字を太くするなどの【装飾】が目的の場合には、HTMLではなくCSSという別の言語でもできるため、使用する機会はあまりないかもしれません。
文字が斜体にならない？
Windowsの標準文字を「メイリオ」に指定している場合は斜体になりません。
また、使っているウェブブラウザ（Microsoft Edge、Google、Firefoxなど）によっても表示のされ方が少しずつ異なります。
【応用編】CSSを使って文字を斜体にしよう
文字の装飾にはCSSを使おう
emタグは文字の協調を意味するタグなので、ただ単純に文字を斜体にしたい場合は、HTML言語ではなく、CSS（スタイルシート）という言語を使用しましょう。
なぜなら、HTMLは本来、文章に【段落や見出し】などの意味を定義付けをするための言語だからです。
HTMLを【体】に例えるなら、CSSはオシャレに着飾る【服】のようなもの。
太字、斜体、色付けするなどの【装飾】をする場合には、２つの言語のそもそもの目的から考えて、より正しい言語を選びましょう。
CSSで文字を斜体にする方法
文字を斜体にするには【font-style】プロパティを使用します。
と思う方もいると思うのでざっくり解説すると、CSSは【セレクタ・プロパティ・値】で構成されます。【どのhtmlタグの・何を・どうする】という意味ですね。
この【font-style】では文字のスタイルを装飾することができるので【値】に【italic（斜体）】を設定することで文字を斜体にすることができます。
実際のCSSコードは下記のとおりです。
|
1 2 3 |
.it{ font-style: italic } |
上の表で言うと【.it】がセレクタ、【font-style:】がプロパティ、【itaic】が値になります。
今回使うのは【classセレクタ】というもの。
同じクラス名（HTMLのclass属性に指定した値）を持つすべてのHTML要素にスタイルを適用させます。
ピリオド（.）に続けて、自分で分かりやすいクラス名を書きましょう。
htmlコードは下記のとおりです。
|
1 2 3 |
<p class="it"> CSSを適用させるにはhtmlタグにclass属性を指定しましょう。 </p> |
カンタンでしたね。
HTMLにCSSを適用させる方法
HTMLにCSSを適用させる方法ですが、ワードプレスなどのウェブページ作成ツールには【追加CSS】という項目があるので、そこに先ほどのCSSコードを書き込めばOKです。
CSSファイルを別に用意してHTMLに読みこませる場合には、ざっくり次のステップで設定しましょう。
①CSSファイルを用意
先ほどのCSSコードを記したファイルの名称を「style.css」にしてHTMLファイルと同じフォルダに保存。
②HTMLの”head”内にCSSファイルのリンクを貼る
htmlの”head”内に以下のコードを記載して作業は完了です。
|
1 2 3 |
<head> <link rel="stylesheet" herf="style.css"> </head> |
まとめ
いかがでしたか？
今回は、emタグの使い方から類似タグとの違い、CSSで文字を斜体にする方法について解説しました。
emタグとiタグ、どちらも文字を斜体にする効果がありますが、検索エンジンに対して【強調】の意味を伝えるのはemタグのみなど、htmlタグにはそれぞれ決まったルールや使い方があります。
一見すると分かりにくいですが、普段から意識することで自然と使い分けができるようになり、見た目だけでなく、中（htmlなど）から正しく、かつキレイな文章を作ることができるようになります。
この記事があなたのお役に立てれば嬉しいです。
最後までご覧いただきありがとうございました。
参考文献：htmlクイックリファレンス
参考文献：MDN Ｗeb Ｄocs
