WEBVTT

1
00:00:00.000 --> 00:00:00.873
こんにちは。

2
00:00:00.873 --> 00:00:04.073
エイチティーエムエル、リファレンス解説です。

3
00:00:04.073 --> 00:00:08.291
エイチティーエムエルタグ編の六十四本目は、アイ、タグです。

4
00:00:08.291 --> 00:00:16.728
アイは、専門用語や外国語の言い回し、登場人物の考えなど、ふつうの本文とは少し性質が違う語句を区別するためのタグです。

5
00:00:16.728 --> 00:00:22.546
ブラウザーでは多くの場合、斜体で表示されますが、大切なのは見た目ではありません。

6
00:00:22.546 --> 00:00:27.638
その部分だけ読み方や雰囲気が変わる、という意味を伝えることが役割です。

7
00:00:27.638 --> 00:00:33.892
今回は、どんな場面で使うのか、よく似たタグとどう使い分けるのかを、順番に学びましょう。

8
00:00:33.892 --> 00:00:41.020
短いタグですが、似た見た目のタグとの違いを知ると、文章の意味をより正確に伝えられるようになります。

9
00:00:41.020 --> 00:00:43.069
基本の書き方を確認します。

10
00:00:43.069 --> 00:00:49.373
アイには開始タグと終了タグの両方が必要で、区別したい語句だけをその間に挟みます。

11
00:00:49.373 --> 00:00:55.046
画面の例では、船の名前である、ひまわり丸、という部分だけを囲んでいます。

12
00:00:55.046 --> 00:00:59.222
船の名前や作品の中の乗り物の名前は、本文とは少し違う扱いをする慣習があるため、

13
00:00:59.222 --> 00:01:03.399
アイの使いどころの一つです。

14
00:01:03.399 --> 00:01:08.442
段落全体を囲むのではなく、必要な範囲だけを囲むのがポイントです。

15
00:01:08.442 --> 00:01:13.643
置き場所は、段落や見出しなど、文章が入る要素の中が基本になります。

16
00:01:13.643 --> 00:01:21.680
終了タグを書き忘れると、意図しない範囲まで区別が続いてしまうので、保存前に範囲を必ず見直してください。

17
00:01:21.680 --> 00:01:24.465
アイが想定している場面を整理します。

18
00:01:24.465 --> 00:01:25.857
代表例は四つです。

19
00:01:25.857 --> 00:01:32.973
一つ目は専門用語や技術用語、二つ目はほかの言語から来た言い回しや、音のまま書き写した語です。

20
00:01:32.973 --> 00:01:39.780
三つ目は、小説などで人物が心の中で考えたこと、四つ目は生物の学名のような分類の名前です。

21
00:01:39.780 --> 00:01:46.742
どれにも共通するのは、強い強調ではなく、ここだけ少し種類が違う、という合図であることです。

22
00:01:46.742 --> 00:01:53.858
逆に、ただ斜体にしたいだけなら、アイではなくシーエスエスで文字の傾きを指定する方が適切です。

23
00:01:53.858 --> 00:01:56.797
意味があるかどうかを先に考えましょう。

24
00:01:56.797 --> 00:02:04.068
たとえば店の名前や地名の読み方を示す場面でも、周りと性質が違う部分として扱える場合があります。

25
00:02:04.068 --> 00:02:07.084
最も混同しやすい、エムタグとの違いを見ます。

26
00:02:07.084 --> 00:02:12.021
エムは、声に出して読むときに力を入れる場所、つまり強勢の強調を表します。

27
00:02:12.021 --> 00:02:16.271
強調する単語を変えると、文の受け取り方まで変わるのが特徴です。

28
00:02:16.271 --> 00:02:18.465
一方、アイは強調ではありません。

29
00:02:18.465 --> 00:02:22.578
用語や外国語など、その部分だけ性質が違うことを示すだけです。

30
00:02:22.578 --> 00:02:28.063
画面の例では、今日、に力を入れる文がエム、用語として示すビューポートがアイです。

31
00:02:28.063 --> 00:02:35.330
どちらも斜体で見えることが多いので、見た目ではなく、強調したいのか、種類を区別したいのかで選んでください。

32
00:02:35.330 --> 00:02:40.266
読み手が声に出す場面を想像すると、この二つの違いが分かりやすくなります。

33
00:02:40.266 --> 00:02:42.734
迷ったときの判断材料にしてください。

34
00:02:42.734 --> 00:02:45.515
ほかの似たタグとも比べておきます。

35
00:02:45.515 --> 00:02:52.387
ビーは、キーワードなど読者の注意を向けたいけれど、重要度は上がらない語句に使います。

36
00:02:52.387 --> 00:02:57.786
ストロングはその逆で、重要、重大、緊急であることを伝えるタグです。

37
00:02:57.786 --> 00:03:02.203
サイトは、本や映画、記事といった作品の題名を示します。

38
00:03:02.203 --> 00:03:10.220
アイは、これらのどれにも当てはまらず、外国語や思考のように、本文と声の調子が変わる部分に使います。

39
00:03:10.220 --> 00:03:15.618
四つのタグは見た目が似ていても意味がまったく違うので、太字や斜体といった見た目からではなく、

40
00:03:15.618 --> 00:03:21.017
伝えたい意味から選ぶ習慣を付けましょう。

41
00:03:21.017 --> 00:03:29.034
テストでは見た目が同じでも意味で選ぶ問題が出やすいので、この四つの違いは表にして覚えると安心です。

42
00:03:29.034 --> 00:03:30.849
属性について確認します。

43
00:03:30.849 --> 00:03:34.328
アイには、このタグ専用の必須属性はありません。

44
00:03:34.328 --> 00:03:39.924
必要に応じて、アイディー、クラス、タイトルなどのグローバル属性を使います。

45
00:03:39.924 --> 00:03:44.764
中でも一緒に覚えたいのが、ラング、つまり言語を指定する属性です。

46
00:03:44.764 --> 00:03:53.990
外国語の言い回しをアイで囲むとき、ラングにその言語を書いておくと、画面読み上げソフトが正しい発音で読み分けやすくなります。

47
00:03:53.990 --> 00:03:58.074
たとえば英語の語句なら、ラングにイーエヌと指定します。

48
00:03:58.074 --> 00:04:03.670
見た目は変わらなくても、読み手や機械への伝わり方が変わる、大切な配慮です。

49
00:04:03.670 --> 00:04:11.686
クラスはシーエスエスの見た目を当てる目印にもなりますが、クラスを付けただけでタグの意味自体は変わりません。

50
00:04:11.686 --> 00:04:14.230
記事の活用事例を読み解きます。

51
00:04:14.230 --> 00:04:18.469
例の文では、プログレッシブ、エンハンスメント、という英語の考え方の名前だけが、

52
00:04:18.469 --> 00:04:22.708
アイで囲まれています。

53
00:04:22.708 --> 00:04:32.883
ここがポイントで、強調したいからではなく、日本語の本文の中に現れる、別の言語の専門的な言い回しだから区別しているのです。

54
00:04:32.883 --> 00:04:40.005
さらにラング属性で英語であることが示されているため、読み上げの発音も切り替わります。

55
00:04:40.005 --> 00:04:45.346
練習するときは、自分の文章の中から外国語の用語を一つ探し、アイとラングをセットで付けてみると、

56
00:04:45.346 --> 00:04:50.688
使い方の感覚がつかめるはずです。

57
00:04:50.688 --> 00:04:58.658
前後の日本語の流れを壊さず、必要な部分だけを自然に区別できている点も、この例の良いところです。

58
00:04:58.658 --> 00:05:01.854
現場でよく見る、注意したい使い方を紹介します。

59
00:05:01.854 --> 00:05:07.828
フレームワークなどでは、アイコンの置き場としてアイタグが使われる例が少なくありません。

60
00:05:07.828 --> 00:05:13.107
ですが、記事でも指摘されている通り、アイはアイコン専用の要素ではありません。

61
00:05:13.107 --> 00:05:16.164
本来の意味は、性質の違う語句を示すことです。

62
00:05:16.164 --> 00:05:21.791
意味のない装飾だけの記号であれば、周りの文字で内容が伝わるようにしたり、

63
00:05:21.791 --> 00:05:27.418
読み上げで余計な情報を拾わない工夫をしたりと、アクセシビリティを別に考える必要があります。

64
00:05:27.418 --> 00:05:32.002
見慣れた書き方だからと、そのまま意味を誤解しないようにしましょう。

65
00:05:32.002 --> 00:05:39.366
ライブラリーの決まりでやむを得ず使う場合も、ボタンやリンクの名前が読み上げで伝わるかは別途確認しましょう。

66
00:05:39.366 --> 00:05:41.455
見た目との関係を整理します。

67
00:05:41.455 --> 00:05:47.573
アイで囲んだ文字が斜体になるのは、ブラウザーが標準で用意している表示にすぎません。

68
00:05:47.573 --> 00:05:54.287
フォントによっては、きれいな斜体が用意されず、無理に傾けたような表示になることもあります。

69
00:05:54.287 --> 00:06:02.046
もし文章の意味ではなく、単に文字を傾けたいだけなら、シーエスエスのフォントスタイルで指定するのが筋です。

70
00:06:02.046 --> 00:06:09.357
反対に、アイの意味が必要な場面では、シーエスエスで斜体を打ち消しても、タグとしての意味は残ります。

71
00:06:09.357 --> 00:06:15.326
意味はエイチティーエムエル、見た目はシーエスエス、と分けて考えることが大切です。

72
00:06:15.326 --> 00:06:22.786
ブラウザーや端末によって斜体の出方が違う場合もあるため、傾きだけに頼った情報の伝え方は避けましょう。

73
00:06:22.786 --> 00:06:25.009
ブラウザー互換性を確認します。

74
00:06:25.009 --> 00:06:31.898
記事が参照するエムディーエヌの記録では、アイ要素はクロームが一以降、エッジが十二以降、

75
00:06:31.898 --> 00:06:38.788
ファイアフォックスが一以降、サファリが一以降と、ごく初期からすべての主要ブラウザーで対応しています。

76
00:06:38.788 --> 00:06:42.344
そのため、表示できない心配はほとんどありません。

77
00:06:42.344 --> 00:06:45.308
確認すべきは互換性よりも使い方の方です。

78
00:06:45.308 --> 00:06:51.383
囲んだ範囲が本当に性質の違う語句か、外国語にラングを付けたか、そして三百二十ピクセル程度の狭い画面でも文章が読みにくくなっていないかを、

79
00:06:51.383 --> 00:06:57.458
仕上げにチェックしましょう。

80
00:06:57.458 --> 00:07:04.718
新しい属性を使う場合と違い、基本の使い方なら古いブラウザーを気にしすぎる必要はほとんどありません。

81
00:07:04.718 --> 00:07:06.226
最後にまとめです。

82
00:07:06.226 --> 00:07:08.906
アイタグのポイントは三つでした。

83
00:07:08.906 --> 00:07:18.118
一つ目、アイは専門用語、外国語の言い回し、人物の思考、学名など、本文と性質が違う語句を区別するタグであること。

84
00:07:18.118 --> 00:07:22.306
二つ目、強調したいならエム、重要ならストロング、作品の題名ならサイトと、

85
00:07:22.306 --> 00:07:26.493
意味に合ったタグを選ぶこと。

86
00:07:26.493 --> 00:07:34.198
三つ目、外国語の語句にはラング属性を一緒に付け、読み上げでも正しく伝わるようにすることです。

87
00:07:34.198 --> 00:07:41.568
練習として、身近な文章から外国語の用語を一つ選び、アイとラングで書き直してみてください。

88
00:07:41.568 --> 00:07:43.076
お疲れさまでした。

89
00:07:43.076 --> 00:07:46.928
小さなタグほど意味を正しく使う姿勢が大切です。

90
00:07:46.928 --> 00:07:51.116
次に文章を書くときから、早速意識してみてください。