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