WEBVTT

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

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

3
00:00:04.014 --> 00:00:08.029
エイチティーエムエルタグ編の八十二本目は、エムタグです。

4
00:00:08.029 --> 00:00:12.760
エムは、文章の中で、声に力を入れて読んでほしい部分を示す要素です。

5
00:00:12.760 --> 00:00:17.061
たとえば、今日ではなく明日に来てください、と伝えたいとき、明日に強勢を置くことで、

6
00:00:17.061 --> 00:00:21.363
聞き手への伝わり方が大きく変わります。

7
00:00:21.363 --> 00:00:26.381
ブラウザーでは一般に斜体で表示されますが、目的は見た目ではありません。

8
00:00:26.381 --> 00:00:30.252
今回は、意味の違いを生む強勢の考え方から、書き方、よく似たタグとの使い分けまで、

9
00:00:30.252 --> 00:00:34.123
順番に確認していきましょう。

10
00:00:34.123 --> 00:00:38.281
漢字で書けば、強勢、つまり力を込めて読む、という意味です。

11
00:00:38.281 --> 00:00:43.012
短いタグですが、文章の伝わり方を左右する大切な役割を持っています。

12
00:00:43.012 --> 00:00:44.794
基本の書き方を確認します。

13
00:00:44.794 --> 00:00:49.728
エムは、開始タグと終了タグの両方を書いて、その間に本文を入れる要素です。

14
00:00:49.728 --> 00:00:55.211
段落を表すピータグのような文章の流れの中に置く、インラインの要素として使います。

15
00:00:55.211 --> 00:00:58.364
画面の例では、今という一語だけを囲んでいます。

16
00:00:58.364 --> 00:01:03.024
このように、囲む範囲は本当に力を入れたい部分だけに絞るのがコツです。

17
00:01:03.024 --> 00:01:07.959
段落全体を囲んでしまうと、どこが大切なのかがかえって伝わらなくなります。

18
00:01:07.959 --> 00:01:11.248
まずは短い範囲から使う感覚を身に付けてください。

19
00:01:11.248 --> 00:01:16.457
終了タグを書き忘れると、意図しない範囲まで強調が続いてしまうことがあります。

20
00:01:16.457 --> 00:01:20.432
タグは必ずペアで閉じることを、書くたびに確認してください。

21
00:01:20.432 --> 00:01:27.704
エムがほかの装飾と大きく違う点は、置く位置によって文の意味そのものが変わることです。

22
00:01:27.704 --> 00:01:31.687
私が明日行きます、という文で考えてみましょう。

23
00:01:31.687 --> 00:01:37.574
私を強調すれば、行くのはほかの人ではなく私だ、という意味になります。

24
00:01:37.574 --> 00:01:41.383
明日を強調すれば、日程がポイントになります。

25
00:01:41.383 --> 00:01:46.578
行くことを強調すれば、行くのか行かないのかが焦点になります。

26
00:01:46.578 --> 00:01:51.945
同じ文章でも、強勢の位置で聞き手が受け取る答えが変わるのです。

27
00:01:51.945 --> 00:01:59.391
書いたあとに声に出して読み、力を入れたい場所と一致しているか確かめる習慣が役立ちます。

28
00:01:59.391 --> 00:02:07.529
たとえば面接や発表の原稿でも、この位置を意識するだけで、同じ文章がぐっと伝わりやすくなります。

29
00:02:07.529 --> 00:02:09.780
それが、エムが持つ力です。

30
00:02:09.780 --> 00:02:12.171
記事の活用事例を読み解きます。

31
00:02:12.171 --> 00:02:18.387
例は、この操作は今実行してください、という一文で、今だけをエムで囲んでいます。

32
00:02:18.387 --> 00:02:24.762
これにより、操作そのものではなく、タイミングが大切だというメッセージになります。

33
00:02:24.762 --> 00:02:28.747
後でではなく、今すぐやってほしい、という強勢です。

34
00:02:28.747 --> 00:02:33.529
試すときは、練習用ファイルのボディにこの例を写し、保存して再読み込みし、

35
00:02:33.529 --> 00:02:38.310
今の部分が斜体で表示されるかを確認してください。

36
00:02:38.310 --> 00:02:45.324
開発者ツールで構造を見て、意図した範囲だけが囲まれているかも合わせてチェックしましょう。

37
00:02:45.324 --> 00:02:49.946
確認の際は、表示だけでなく、エムの開始位置と終了位置が、今の一語だけを囲んでいるか、

38
00:02:49.946 --> 00:02:54.568
ソースでも見直してみてください。

39
00:02:54.568 --> 00:02:58.864
よく混同されるストロングとの違いを整理します。

40
00:02:58.864 --> 00:03:06.148
ストロングは、内容そのものが重要である、重大である、緊急であることを示します。

41
00:03:06.148 --> 00:03:11.564
警告文のように、読み飛ばしてほしくない情報に使うタグです。

42
00:03:11.564 --> 00:03:16.420
一方、エムは重要性ではなく、文を読むときの強勢です。

43
00:03:16.420 --> 00:03:22.583
どこに力を入れて読むと意味が正しく伝わるか、という観点で選びます。

44
00:03:22.583 --> 00:03:29.120
たとえば、警告の見出しはストロング、その中で慎重にという読み方を伝えたい部分はエム、

45
00:03:29.120 --> 00:03:35.657
というように、役割の違いで分けると判断しやすくなります。

46
00:03:35.657 --> 00:03:41.166
迷ったときは、その部分が緊急で重要なのか、それとも読み方の焦点なのか、と自問すると、

47
00:03:41.166 --> 00:03:46.676
どちらを選ぶべきかはっきりします。

48
00:03:46.676 --> 00:03:50.450
ア イタグとビータグとの違いも押さえましょう。

49
00:03:50.450 --> 00:03:57.671
アイは、専門用語や外来語、登場人物の思考など、通常の本文とは性質が異なる語句を示します。

50
00:03:57.671 --> 00:03:59.312
強勢ではありません。

51
00:03:59.312 --> 00:04:06.696
ビーは、製品名やキーワードのように、重要性を主張せずに読者の注意を引きたい文字に使います。

52
00:04:06.696 --> 00:04:12.112
見た目はいずれも似て見えることがありますが、意味はまったく別です。

53
00:04:12.112 --> 00:04:16.214
エムは、声の強勢で文の意味が変わる場所にだけ使う。

54
00:04:16.214 --> 00:04:21.466
この基準を覚えておくと、三つのタグを迷わず選べるようになります。

55
00:04:21.466 --> 00:04:28.686
なお、三つとも初期表示が似ているのは偶然に近く、仕様が意図する意味とは関係がありません。

56
00:04:28.686 --> 00:04:31.968
見た目ではなく意味で選ぶことが原則です。

57
00:04:31.968 --> 00:04:38.277
エムには、入れ子によって強調の段階が変わるという、少し珍しい性質があります。

58
00:04:38.277 --> 00:04:45.084
エムの中にさらにエムを書くと、外側よりも内側の方が、より強い強勢として扱われます。

59
00:04:45.084 --> 00:04:50.396
読み上げ支援技術でも、段階に応じて読み方が変わる場合があります。

60
00:04:50.396 --> 00:04:54.879
ただし、これは強い表現が必要な場面のための仕組みです。

61
00:04:54.879 --> 00:05:02.018
何重にも重ねたり、ページのあちこちで使ったりすると、かえってどれも目立たなくなります。

62
00:05:02.018 --> 00:05:07.497
本当に段階を付けたい一箇所にだけ使う、節度のある使い方が大切です。

63
00:05:07.497 --> 00:05:10.153
画面の例は説明のためのものです。

64
00:05:10.153 --> 00:05:14.968
実際の文章では、本当に段階差が必要な場面は多くありません。

65
00:05:14.968 --> 00:05:17.956
使うかどうかは慎重に判断しましょう。

66
00:05:17.956 --> 00:05:19.571
属性を確認します。

67
00:05:19.571 --> 00:05:24.417
エムには、この記事で必須となる専用の属性はありません。

68
00:05:24.417 --> 00:05:30.519
必要に応じて、アイディー、クラス、ラングといった共通属性を使います。

69
00:05:30.519 --> 00:05:35.992
アイディーは文書内で一意な識別子、クラスはシーエスエスやスクリプトでまとめて選ぶための名前、

70
00:05:35.992 --> 00:05:41.466
ラングは内容の言語を示します。

71
00:05:41.466 --> 00:05:48.824
データ属性で独自の値を保持することもできますが、秘密情報を置く場所ではありません。

72
00:05:48.824 --> 00:05:57.439
また、クラスで見た目を変えても、エムが持つ強勢という意味自体は変わらない点も覚えておきましょう。

73
00:05:57.439 --> 00:06:00.131
共通属性は、あくまで補助です。

74
00:06:00.131 --> 00:06:09.104
まずは強勢が必要な場所かどうかを決め、属性は必要になったときにだけ、控えめに加えるのがおすすめです。

75
00:06:09.104 --> 00:06:11.938
見た目とシーエスエスの関係を確認します。

76
00:06:11.938 --> 00:06:18.030
エムは多くのブラウザーで斜体で表示されるのが標準ですが、これはあくまで初期の表示です。

77
00:06:18.030 --> 00:06:23.556
シーエスエスで太字にしたり、色を付けたり、斜体を解除したりすることもできます。

78
00:06:23.556 --> 00:06:28.798
逆に大切なのは、ただ文字を斜体にしたいだけの理由でエムを使わないことです。

79
00:06:28.798 --> 00:06:33.757
装飾が目的であれば、意味を持たない要素にシーエスエスを当てるべきです。

80
00:06:33.757 --> 00:06:39.708
意味はエイチティーエムエルで、見た目はシーエスエスで、という役割分担を守りましょう。

81
00:06:39.708 --> 00:06:44.100
表示を太字へ変えた場合でも、読み上げでの扱いはエムのままです。

82
00:06:44.100 --> 00:06:48.492
見た目の変更が、意味を変えるわけではない点に注意してください。

83
00:06:48.492 --> 00:06:50.780
ブラウザー互換性を確認します。

84
00:06:50.780 --> 00:06:57.949
記事が参照するエムディーエヌのデータでは、エム要素は、クロームが一以降、

85
00:06:57.949 --> 00:07:05.118
エッジが十二以降、ファイアフォックスが一以降、サファリが四以前からと、主要ブラウザーで非常に古くから対応しています。

86
00:07:05.118 --> 00:07:09.694
新しい機能ではないため、対応を心配する必要はほぼありません。

87
00:07:09.694 --> 00:07:15.643
ただし、読み上げで強勢がどう表現されるかは、支援技術や設定によって異なります。

88
00:07:15.643 --> 00:07:19.609
見た目だけでなく、音声で聞いたときにも伝わる文章になっているかを意識すると、

89
00:07:19.609 --> 00:07:23.574
より親切なページになります。

90
00:07:23.574 --> 00:07:29.371
新しいブラウザーでも古いブラウザーでも、基本の表示に差はほとんどありません。

91
00:07:29.371 --> 00:07:33.184
学習の初期に覚えて、安心して使える要素の一つです。

92
00:07:33.184 --> 00:07:35.860
最後に、よくある間違いとまとめです。

93
00:07:35.860 --> 00:07:39.875
一つ目は、斜体にしたいだけの理由でエムを使うことです。

94
00:07:39.875 --> 00:07:42.105
装飾はシーエスエスの仕事です。

95
00:07:42.105 --> 00:07:45.227
二つ目は、文章全体を囲んでしまうことです。

96
00:07:45.227 --> 00:07:48.647
すべてを強調すると、結局どこも強調されません。

97
00:07:48.647 --> 00:07:52.067
三つ目は、重要な警告にエムだけを使うことです。

98
00:07:52.067 --> 00:07:54.892
重要性や緊急性はストロングの役割です。

99
00:07:54.892 --> 00:08:00.096
エムは、強調する位置で文の意味が変わる場所に、短く絞って使うタグです。

100
00:08:00.096 --> 00:08:06.787
この一文を判断基準にして、ぜひ手元の練習ページで強勢の位置を動かす実験をしてみてください。

101
00:08:06.787 --> 00:08:11.247
声に出して読み、力を入れたい場所とエムの位置が合っているか。

102
00:08:11.247 --> 00:08:16.154
これを公開前の最後の確認に加えておくと、伝わる文章に仕上がります。

103
00:08:16.154 --> 00:08:17.492
お疲れさまでした。