iタグとは?使い方から類似タグとの使い分けについて解説

iタグってなに?どんな時にどうやって使うの?他のタグとの違いは?

こんなことに悩んでいませんか?

文字を斜体にするiタグですが、使い方のルールがあいまいで、なんとなく斜めにしたい部分に使っている方、けっこう多いと思います。

という訳で今回は、そんな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タグで囲むだけです。

結果はコチラ

iタグの使い方はとってもカンタン。斜体にしたい文章をiタグで囲むだけです。結果を見てみましょう。

iタグと類似する要素との違い

文字を斜体にするiタグですが、効果や目的が類似しているタグがいくつかあります。

これらの違いを知ることで、これまで何となく使っていた方もhtmlのルールに沿った、より正しい文章を書くことができるようになるので、この際に覚えてしまいましょう。

類似タグを一覧にまとめると次のとおりです。

見た目と意味に働きかけ 見た目のみに働きかけ
文字を斜体にする emタグ iタグ
文字を太字にする strongタグ bタグ

それぞれ解説していきますね。

emタグ

emタグは【emphasis(強調)】の略で、iタグと同様にタグで囲った文章を斜体にするほか、検索エンジンに対して文章の【強調】を示す効果があります。

実際の使用例は下記のとおりです。

この他にも、強調する場所によって文章のニュアンス・捉え方を変えることができます。

強調したい主張は何か?そんなことを考えながら使いましょう。

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は以下の3つの要素で構成されており、プロパティは②の【何を】に該当する要素です。

  1. セレクタ【どのhtmlタグの】
  2. プロパティ【何を】
  3. 値【どうする】

【font-style】プロパティは、その名のとおり文字のスタイルをデザインすることができるので、【値】を【italic(斜体)】にすることで文字を斜体にできます。

実際のCSSコードは下記のとおりです。

上の表で言うと【.it】がセレクタ、【font-style:】がプロパティ、【itaic】が値になります。

今回使うのは【classセレクタ】というもの。

同じクラス名(HTMLのclass属性に指定した値)を持つすべてのHTML要素にスタイルを適用させます。

ピリオド(.)に続けて、自分で分かりやすいクラス名を書きましょう。

htmlコードは下記のとおりです。

慣れればとっても便利なので、この際にぜひ覚えてみましょう。

HTMLにCSSを適用させる方法

ワードプレスなどのウェブページ作成ツールには【追加CSS】という項目があるので、そこに先ほどのCSSコードを書き込めば適用されます。

CSSファイルを別に用意してHTMLに読みこませる場合には、次の2ステップが必要になります。

①CSSファイルを用意

先ほどのCSSコードを記したファイルの名称を「style.css」にしてHTMLファイルと同じフォルダに保存。

②HTMLの”head”内にCSSファイルのリンクを貼る。

htmlの”head”内に以下のコードを記載して作業は完了です。

まとめ

いかがでしたでしょうか?

今回はiタグの概要から使い方、類似タグとの違い、CSSで文字を斜体にする方法を解説しました。

初めの頃は慣れないかもしれませんが、今日から意識していくことで、それぞれの文章に適したタグを自然に使うことができるようになります。

そうすれば、見た目だけでなく、中(htmlなど)から正しく、かつキレイな文章を書くことができるようになるでしょう。

この記事があなたのお役に立てれば嬉しいです。

最後までご覧いただきありがとうございました。

参考文献:htmlクイックリファレンス
参考文献:MDN Web Docs

BLOGコンテンツをパーソナライズします

あなたは現在「プログラミング学習者」ですか?