WEBVTT

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

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

3
00:00:04.553 --> 00:00:08.617
HTMLタグ編の二十二本目は、ストロングタグです。

4
00:00:08.617 --> 00:00:14.145
ストロングは、文章の中で、重要、重大、緊急であることを示すタグです。

5
00:00:14.145 --> 00:00:18.048
ブラウザーではふつう太字で表示されるので、太くするためのタグに見えますが、

6
00:00:18.048 --> 00:00:21.950
本当の役割は違います。

7
00:00:21.950 --> 00:00:30.079
ここが大事だ、という意味を、読み手にも、検索エンジンや読み上げソフトにも正しく伝えることが目的です。

8
00:00:30.079 --> 00:00:34.388
今回は、使う場面、基本の書き方、記事のコード例、ビーやイーエムとの違いまで、

9
00:00:34.388 --> 00:00:38.697
初心者向けに順番に解説します。

10
00:00:38.697 --> 00:00:42.599
太字の使い分けで迷わなくなる、実践的な内容です。

11
00:00:42.599 --> 00:00:48.940
身近な注意書きを思い浮かべながら聞くと、使いどころがイメージしやすくなります。

12
00:00:48.940 --> 00:00:52.356
まず、どんな場面で使うかを整理しましょう。

13
00:00:52.356 --> 00:00:56.747
ストロングが向いているのは、読み飛ばすと困る情報です。

14
00:00:56.747 --> 00:01:01.790
たとえば、注意事項の中で特に守ってほしい条件、手順の中で順番を間違えると失敗する部分、

15
00:01:01.790 --> 00:01:06.832
締め切りが迫っているお知らせなどです。

16
00:01:06.832 --> 00:01:13.338
逆に、文章のあちこちをストロングで囲むと、かえって何が大切か分からなくなります。

17
00:01:13.338 --> 00:01:18.868
記事も、強調を増やし過ぎると重要度が伝わらなくなると注意しています。

18
00:01:18.868 --> 00:01:24.724
本当に重要な一か所、二か所に絞って使うことが、読み手への親切になります。

19
00:01:24.724 --> 00:01:29.766
色だけに頼らず、言葉自体でも大切さが伝わるように書きましょう。

20
00:01:29.766 --> 00:01:36.272
自分が読み手だったら、どこを最初に目で追うかを考えると、置く場所が見えてきます。

21
00:01:36.272 --> 00:01:37.776
基本の書き方です。

22
00:01:37.776 --> 00:01:43.625
ストロングは開始タグと終了タグを明示し、その間に大切な言葉を入れます。

23
00:01:43.625 --> 00:01:49.140
段落や見出し、リストといった文章の中で、部分的に使うのが基本です。

24
00:01:49.140 --> 00:01:56.326
コード例では、提出期限の日時だけを囲んだ例と、注意という言葉を囲んだ例を示しています。

25
00:01:56.326 --> 00:02:01.674
文章全体を囲むのではなく、大切なまとまりだけを囲むのがコツです。

26
00:02:01.674 --> 00:02:07.858
段落全体が重要な場合は、まず見出しや文章の構成で伝える方法も考えましょう。

27
00:02:07.858 --> 00:02:14.375
保存後に再読み込みして、意図した部分だけが太字になっているか確認してください。

28
00:02:14.375 --> 00:02:21.060
タグの前後の文章も含めて読むと、強調の範囲が適切かどうかが分かりやすくなります。

29
00:02:21.060 --> 00:02:23.359
記事の活用事例を見てみましょう。

30
00:02:23.359 --> 00:02:28.531
例は、保存してから、ブラウザーを再読み込みしてください、という一文です。

31
00:02:28.531 --> 00:02:33.129
ここでストロングが囲んでいるのは、保存してから、という部分です。

32
00:02:33.129 --> 00:02:40.169
なぜここが重要かというと、保存する前に再読み込みすると、せっかく書いた内容が消えてしまうからです。

33
00:02:40.169 --> 00:02:43.761
つまり、順番そのものが守るべき条件になっています。

34
00:02:43.761 --> 00:02:50.801
このように、失敗を防ぐための条件や、手順の要になる言葉に使うと、ストロングの意味がはっきりします。

35
00:02:50.801 --> 00:02:56.260
練習用ファイルに写して、開発者ツールのエレメンツで構造を確認してみましょう。

36
00:02:56.260 --> 00:03:01.720
この例は短いですが、条件を最初に示す書き方は、説明文全般に応用できる形です。

37
00:03:01.720 --> 00:03:05.454
少し進んだ使い方として、入れ子を紹介します。

38
00:03:05.454 --> 00:03:10.292
ストロングの中に、さらにストロングを入れると、その内側の言葉は、周りよりもさらに重要である、

39
00:03:10.292 --> 00:03:15.130
という意味になります。

40
00:03:15.130 --> 00:03:24.806
コード例では、警告全体をストロングで囲み、その中でも、元に戻せません、という最も重大な部分をもう一度囲んでいます。

41
00:03:24.806 --> 00:03:30.577
削除や送信など、取り返しのつかない操作の注意書きで使える考え方です。

42
00:03:30.577 --> 00:03:35.160
ただし、これは本当に段階を付けたいときだけの方法です。

43
00:03:35.160 --> 00:03:42.120
普段から多用すると段階の意味が薄れるので、ここぞという場面に温存しておきましょう。

44
00:03:42.120 --> 00:03:48.740
入れ子の考え方は、仕様で認められた相対的な重要度の表し方として知られています。

45
00:03:48.740 --> 00:03:51.555
ストロングの属性を整理します。

46
00:03:51.555 --> 00:03:56.058
この要素には、必須となる専用の属性はありません。

47
00:03:56.058 --> 00:04:05.627
必要に応じて、アイディー、クラス、ラング、データ属性といった、どの要素にも使える共通属性を利用します。

48
00:04:05.627 --> 00:04:10.881
たとえばコード例のように、クラスを付ければ、シーエスエスで色を足したり、

49
00:04:10.881 --> 00:04:16.135
ジャバスクリプトから参照したりできます。

50
00:04:16.135 --> 00:04:22.514
ただし、クラスで見た目を変えても、要素の意味そのものは変わりません。

51
00:04:22.514 --> 00:04:28.519
大切なのは属性の数ではなく、囲んだ言葉が本当に重要かどうかです。

52
00:04:28.519 --> 00:04:32.834
まずは属性なしで正しく使うことに慣れましょう。

53
00:04:32.834 --> 00:04:40.152
データ属性は、画面に見せる情報ではなく、プログラム側で使う値のためにあります。

54
00:04:40.152 --> 00:04:44.413
間違えやすい、ビーとイーエムとの違いを押さえましょう。

55
00:04:44.413 --> 00:04:46.780
ストロングは重要さを示します。

56
00:04:46.780 --> 00:04:51.356
イーエムは、抑揚によって文の意味が変わる部分を強調します。

57
00:04:51.356 --> 00:04:58.615
たとえば、それはあなたの本です、と、あなたを強調すると、持ち主が誰かという意味が際立ちます。

58
00:04:58.615 --> 00:05:05.874
ビーは、製品名やキーワードなど、特別な重要さはないけれど、実用上太字にしたい部分に使います。

59
00:05:05.874 --> 00:05:09.188
見た目が似ていても、意味はまったく別です。

60
00:05:09.188 --> 00:05:16.290
迷ったら、その言葉が重要か、抑揚か、単なる目立たせか、と自問してからタグを選んでください。

61
00:05:16.290 --> 00:05:22.444
この三つの区別ができると、コードを読む側にも意図が正確に伝わるようになります。

62
00:05:22.444 --> 00:05:24.031
大切な区別をもう一つ。

63
00:05:24.031 --> 00:05:28.936
ただ太字にしたいだけなら、ストロングではなくシーエスエスを使います。

64
00:05:28.936 --> 00:05:34.563
記事の一文にも、太字にするだけならシーエスエスを使います、と明記されています。

65
00:05:34.563 --> 00:05:40.623
ストロングが太字に見えるのは、ブラウザーが初期状態で太字にしているからにすぎません。

66
00:05:40.623 --> 00:05:44.735
見た目だけが目的なら、スパンなどにクラスを付け、フォントウェイトで太くする方が、

67
00:05:44.735 --> 00:05:48.846
意味と見た目を分けて管理できます。

68
00:05:48.846 --> 00:05:55.195
逆に、本当に重要な言葉なら、色や太さに頼る前に、まずストロングで意味を示すことが先です。

69
00:05:55.195 --> 00:05:56.926
この順番を守りましょう。

70
00:05:56.926 --> 00:06:02.264
意味と見た目を分ける考え方は、ほかの多くのタグにも共通する大切な原則です。

71
00:06:02.264 --> 00:06:05.483
注意点と、よくある間違いを確認します。

72
00:06:05.483 --> 00:06:07.347
一つ目は使いすぎです。

73
00:06:07.347 --> 00:06:14.295
長い文章全体をストロングで囲むと、強調の意味がなくなり、読み上げでも伝わりません。

74
00:06:14.295 --> 00:06:17.684
二つ目は、見出し代わりに使う間違いです。

75
00:06:17.684 --> 00:06:24.970
大きく太くしたいからといって見出しの代わりにせず、見出しにはエイチタグを使いましょう。

76
00:06:24.970 --> 00:06:27.681
三つ目は、色だけに頼ることです。

77
00:06:27.681 --> 00:06:36.661
赤字にしただけで重要さを伝えた気にならず、言葉の内容自体に、期限や条件といった必要な情報を含めてください。

78
00:06:36.661 --> 00:06:44.117
また、三百二十ピクセル程度の狭い画面でも、文章が欠けずに読めるか確認する習慣も大切です。

79
00:06:44.117 --> 00:06:50.556
公開前に一度、強調した部分だけを拾い読みして、過不足がないか見直しましょう。

80
00:06:50.556 --> 00:06:52.655
ブラウザー互換性を確認します。

81
00:06:52.655 --> 00:06:59.022
記事が参照するエムディーエヌの記録では、ストロング本体は、クロームが一以降、

82
00:06:59.022 --> 00:07:05.388
エッジが十二以降、ファイアフォックスが一以降で、補足条件付きで対応し、サファリは四以前から対応しています。

83
00:07:05.388 --> 00:07:12.245
数字がとても小さいことから分かる通り、昔からある基本の要素なので、現在の環境では安心して使えます。

84
00:07:12.245 --> 00:07:18.542
ただし、これは要素本体の対応開始の記録であり、細かな表示までを保証するものではありません。

85
00:07:18.542 --> 00:07:24.699
大切なページでは、スマートフォンなど利用対象の実機でも、一度表示を確認しておきましょう。

86
00:07:24.699 --> 00:07:30.016
対応が古くから安定している要素ほど、学習の初期に覚えておくと長く役立ちます。

87
00:07:30.016 --> 00:07:31.720
最後に練習とまとめです。

88
00:07:31.720 --> 00:07:35.838
ストロングは、重要、重大、緊急であることを示すタグでした。

89
00:07:35.838 --> 00:07:37.684
大切なポイントは三つです。

90
00:07:37.684 --> 00:07:41.092
一つ目は、本当に大切な部分だけに絞って使うこと。

91
00:07:41.092 --> 00:07:45.778
二つ目は、ビーやイーエムとは意味が違うので、目的で選び分けること。

92
00:07:45.778 --> 00:07:49.896
三つ目は、太字にしたいだけならシーエスエスを使うことです。

93
00:07:49.896 --> 00:07:54.369
練習として、操作手順の注意書きを一つ書き、失敗すると困る条件だけをストロングで囲んで、

94
00:07:54.369 --> 00:07:58.842
ブラウザーで表示を確認してみてください。

95
00:07:58.842 --> 00:08:00.120
お疲れさまでした。

96
00:08:00.120 --> 00:08:05.090
次回は、文章の一部に意味なく範囲を指定する、スパンタグを学びましょう。

97
00:08:05.090 --> 00:08:10.628
今日の内容を、自分の練習ページの注意書きで早速試してみることが一番の復習です。