VIDEO LESSON

HTMLのiタグとは？属性・使い方・ブラウザー互換性と活用例の解説動画

再生時間 7:51動画を別のタブで開く ↗

動画の字幕・文字起こしを読む

再生中の字幕を濃い黒で表示し、一番上に追従します。字幕の行を選ぶと、その位置から再生できます。

0:00こんにちは。
0:00エイチティーエムエル、リファレンス解説です。
0:04エイチティーエムエルタグ編の六十四本目は、アイ、タグです。
0:08アイは、専門用語や外国語の言い回し、登場人物の考えなど、ふつうの本文とは少し性質が違う語句を区別するためのタグです。
0:16ブラウザーでは多くの場合、斜体で表示されますが、大切なのは見た目ではありません。
0:22その部分だけ読み方や雰囲気が変わる、という意味を伝えることが役割です。
0:27今回は、どんな場面で使うのか、よく似たタグとどう使い分けるのかを、順番に学びましょう。
0:33短いタグですが、似た見た目のタグとの違いを知ると、文章の意味をより正確に伝えられるようになります。
0:41基本の書き方を確認します。
0:43アイには開始タグと終了タグの両方が必要で、区別したい語句だけをその間に挟みます。
0:49画面の例では、船の名前である、ひまわり丸、という部分だけを囲んでいます。
0:55船の名前や作品の中の乗り物の名前は、本文とは少し違う扱いをする慣習があるため、
0:59アイの使いどころの一つです。
1:03段落全体を囲むのではなく、必要な範囲だけを囲むのがポイントです。
1:08置き場所は、段落や見出しなど、文章が入る要素の中が基本になります。
1:13終了タグを書き忘れると、意図しない範囲まで区別が続いてしまうので、保存前に範囲を必ず見直してください。
1:21アイが想定している場面を整理します。
1:24代表例は四つです。
1:25一つ目は専門用語や技術用語、二つ目はほかの言語から来た言い回しや、音のまま書き写した語です。
1:32三つ目は、小説などで人物が心の中で考えたこと、四つ目は生物の学名のような分類の名前です。
1:39どれにも共通するのは、強い強調ではなく、ここだけ少し種類が違う、という合図であることです。
1:46逆に、ただ斜体にしたいだけなら、アイではなくシーエスエスで文字の傾きを指定する方が適切です。
1:53意味があるかどうかを先に考えましょう。
1:56たとえば店の名前や地名の読み方を示す場面でも、周りと性質が違う部分として扱える場合があります。
2:04最も混同しやすい、エムタグとの違いを見ます。
2:07エムは、声に出して読むときに力を入れる場所、つまり強勢の強調を表します。
2:12強調する単語を変えると、文の受け取り方まで変わるのが特徴です。
2:16一方、アイは強調ではありません。
2:18用語や外国語など、その部分だけ性質が違うことを示すだけです。
2:22画面の例では、今日、に力を入れる文がエム、用語として示すビューポートがアイです。
2:28どちらも斜体で見えることが多いので、見た目ではなく、強調したいのか、種類を区別したいのかで選んでください。
2:35読み手が声に出す場面を想像すると、この二つの違いが分かりやすくなります。
2:40迷ったときの判断材料にしてください。
2:42ほかの似たタグとも比べておきます。
2:45ビーは、キーワードなど読者の注意を向けたいけれど、重要度は上がらない語句に使います。
2:52ストロングはその逆で、重要、重大、緊急であることを伝えるタグです。
2:57サイトは、本や映画、記事といった作品の題名を示します。
3:02アイは、これらのどれにも当てはまらず、外国語や思考のように、本文と声の調子が変わる部分に使います。
3:10四つのタグは見た目が似ていても意味がまったく違うので、太字や斜体といった見た目からではなく、
3:15伝えたい意味から選ぶ習慣を付けましょう。
3:21テストでは見た目が同じでも意味で選ぶ問題が出やすいので、この四つの違いは表にして覚えると安心です。
3:29属性について確認します。
3:30アイには、このタグ専用の必須属性はありません。
3:34必要に応じて、アイディー、クラス、タイトルなどのグローバル属性を使います。
3:39中でも一緒に覚えたいのが、ラング、つまり言語を指定する属性です。
3:44外国語の言い回しをアイで囲むとき、ラングにその言語を書いておくと、画面読み上げソフトが正しい発音で読み分けやすくなります。
3:53たとえば英語の語句なら、ラングにイーエヌと指定します。
3:58見た目は変わらなくても、読み手や機械への伝わり方が変わる、大切な配慮です。
4:03クラスはシーエスエスの見た目を当てる目印にもなりますが、クラスを付けただけでタグの意味自体は変わりません。
4:11記事の活用事例を読み解きます。
4:14例の文では、プログレッシブ、エンハンスメント、という英語の考え方の名前だけが、
4:18アイで囲まれています。
4:22ここがポイントで、強調したいからではなく、日本語の本文の中に現れる、別の言語の専門的な言い回しだから区別しているのです。
4:32さらにラング属性で英語であることが示されているため、読み上げの発音も切り替わります。
4:40練習するときは、自分の文章の中から外国語の用語を一つ探し、アイとラングをセットで付けてみると、
4:45使い方の感覚がつかめるはずです。
4:50前後の日本語の流れを壊さず、必要な部分だけを自然に区別できている点も、この例の良いところです。
4:58現場でよく見る、注意したい使い方を紹介します。
5:01フレームワークなどでは、アイコンの置き場としてアイタグが使われる例が少なくありません。
5:07ですが、記事でも指摘されている通り、アイはアイコン専用の要素ではありません。
5:13本来の意味は、性質の違う語句を示すことです。
5:16意味のない装飾だけの記号であれば、周りの文字で内容が伝わるようにしたり、
5:21読み上げで余計な情報を拾わない工夫をしたりと、アクセシビリティを別に考える必要があります。
5:27見慣れた書き方だからと、そのまま意味を誤解しないようにしましょう。
5:32ライブラリーの決まりでやむを得ず使う場合も、ボタンやリンクの名前が読み上げで伝わるかは別途確認しましょう。
5:39見た目との関係を整理します。
5:41アイで囲んだ文字が斜体になるのは、ブラウザーが標準で用意している表示にすぎません。
5:47フォントによっては、きれいな斜体が用意されず、無理に傾けたような表示になることもあります。
5:54もし文章の意味ではなく、単に文字を傾けたいだけなら、シーエスエスのフォントスタイルで指定するのが筋です。
6:02反対に、アイの意味が必要な場面では、シーエスエスで斜体を打ち消しても、タグとしての意味は残ります。
6:09意味はエイチティーエムエル、見た目はシーエスエス、と分けて考えることが大切です。
6:15ブラウザーや端末によって斜体の出方が違う場合もあるため、傾きだけに頼った情報の伝え方は避けましょう。
6:22ブラウザー互換性を確認します。
6:25記事が参照するエムディーエヌの記録では、アイ要素はクロームが一以降、エッジが十二以降、
6:31ファイアフォックスが一以降、サファリが一以降と、ごく初期からすべての主要ブラウザーで対応しています。
6:38そのため、表示できない心配はほとんどありません。
6:42確認すべきは互換性よりも使い方の方です。
6:45囲んだ範囲が本当に性質の違う語句か、外国語にラングを付けたか、そして三百二十ピクセル程度の狭い画面でも文章が読みにくくなっていないかを、
6:51仕上げにチェックしましょう。
6:57新しい属性を使う場合と違い、基本の使い方なら古いブラウザーを気にしすぎる必要はほとんどありません。
7:04最後にまとめです。
7:06アイタグのポイントは三つでした。
7:08一つ目、アイは専門用語、外国語の言い回し、人物の思考、学名など、本文と性質が違う語句を区別するタグであること。
7:18二つ目、強調したいならエム、重要ならストロング、作品の題名ならサイトと、
7:22意味に合ったタグを選ぶこと。
7:26三つ目、外国語の語句にはラング属性を一緒に付け、読み上げでも正しく伝わるようにすることです。
7:34練習として、身近な文章から外国語の用語を一つ選び、アイとラングで書き直してみてください。
7:41お疲れさまでした。
7:43小さなタグほど意味を正しく使う姿勢が大切です。
7:46次に文章を書くときから、早速意識してみてください。

日本語字幕をダウンロード（WebVTT）

この動画で学べること

iタグの役割と属性を、コード例・活用事例・注意点とともに解説。Chrome・Edge・Firefox・Safariの互換性も確認できます。専門用語や思考など、通常の本文と性質が異なる文字を表します。

解説記事・サンプルコードを読む：HTMLのiタグとは？属性・使い方・ブラウザー互換性と活用例 →