WEBVTT

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

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

3
00:00:04.432 --> 00:00:09.496
エイチティーエムエルタグ編の七十四本目は、エイチツー、タグです。

4
00:00:09.496 --> 00:00:18.360
エイチツーは、エイチワンからエイチシックスまで六段階ある見出しの中で、二番目の深さにあたる第二階層を担当します。

5
00:00:18.360 --> 00:00:24.849
ページ全体のタイトルであるエイチワンの下で、大きな章を区切るときに使う見出しです。

6
00:00:24.849 --> 00:00:30.705
長い記事や解説ページでは、読者が今どこを読んでいるかを示す目印になります。

7
00:00:30.705 --> 00:00:35.453
今回は、その役割と正しい使い方を順番に確認していきましょう。

8
00:00:35.453 --> 00:00:40.201
見出しの階層全体の中で、自分の位置を意識することが大切です。

9
00:00:40.201 --> 00:00:42.892
焦らず一歩ずつ進めていきましょう。

10
00:00:42.892 --> 00:00:46.269
まず、見出し全体の中での位置を押さえます。

11
00:00:46.269 --> 00:00:53.024
エイチワンが文書全体を表す最も大きな見出しで、エイチツーはその直下の章にあたります。

12
00:00:53.024 --> 00:00:58.331
本でいえば、表題の下にある章の題名と考えると分かりやすいでしょう。

13
00:00:58.331 --> 00:01:03.156
その章をさらに分けるときに、初めてエイチスリーが登場します。

14
00:01:03.156 --> 00:01:08.945
大切なのは、見出しだけを順に拾って読んでも文章の流れがつかめることです。

15
00:01:08.945 --> 00:01:15.700
題名は内容が具体的に伝わる言葉にし、階層を飛ばさず一段ずつ深くしていくのが基本です。

16
00:01:15.700 --> 00:01:20.042
目次を作るときも、この順番がそのまま骨組みになります。

17
00:01:20.042 --> 00:01:25.028
番号と階層を常にセットで覚えておくと、長い文書でも迷いません。

18
00:01:25.028 --> 00:01:27.440
目次との対応も自然に整います。

19
00:01:27.440 --> 00:01:29.504
基本の書き方を確認します。

20
00:01:29.504 --> 00:01:35.853
エイチツーは、開始タグと終了タグを両方書いて、その間に見出しの文章をはさみます。

21
00:01:35.853 --> 00:01:43.156
画面の例は記事のコード例と同じ形で、見出しの直後に段落を置いて、その章の説明を続けています。

22
00:01:43.156 --> 00:01:48.870
この教材では、開始タグと終了タグを省略せずに明示する書き方で統一します。

23
00:01:48.870 --> 00:01:50.934
置き場所はボディの中です。

24
00:01:50.934 --> 00:01:58.236
見出しの中には基本的に短いテキストを入れ、長い文章や別の見出しを入れ子にしないようにします。

25
00:01:58.236 --> 00:02:02.840
まずはこの形を正確に書けることが、すべての土台になります。

26
00:02:02.840 --> 00:02:07.443
短い見出しほど、読み手に内容が素早く伝わる傾向があります。

27
00:02:07.443 --> 00:02:11.412
書き方が安定すると、後の学習もぐっと楽になります。

28
00:02:11.412 --> 00:02:14.599
では、どんな場面で使うのでしょうか。

29
00:02:14.599 --> 00:02:20.089
代表的なのは、一つのページの中に大きな話題が複数あるときです。

30
00:02:20.089 --> 00:02:29.474
たとえば学習会の案内というページの中で、参加方法、当日の持ち物、よくある質問といった章に分ける使い方です。

31
00:02:29.474 --> 00:02:37.089
逆に、話題が一つだけで短いページなら、無理にエイチツーを何本も並べる必要はありません。

32
00:02:37.089 --> 00:02:43.818
記事も、見出しだけを読んでも文章の流れが分かる題名にすることを勧めています。

33
00:02:43.818 --> 00:02:49.485
使うかどうかは、ページ全体を章に分けられるかで判断してください。

34
00:02:49.485 --> 00:02:55.682
実際に使うかどうかは、文書の長さと、話題の分かれ方で判断してください。

35
00:02:55.682 --> 00:02:59.224
短い章なら無理に分ける必要はありません。

36
00:02:59.224 --> 00:03:01.733
記事の活用事例を読み解きます。

37
00:03:01.733 --> 00:03:07.753
例の中心は、エイチツーの見出しと、その説明を書いた段落の組み合わせです。

38
00:03:07.753 --> 00:03:14.276
ここではセクションの中でエイチツーを置き、一つの大きな話題を切り分けています。

39
00:03:14.276 --> 00:03:19.377
試すときは、練習用のエイチティーエムエルファイルをコピーし、ボディの適切な位置にこの形を写して、

40
00:03:19.377 --> 00:03:24.478
保存後に再読み込みします。

41
00:03:24.478 --> 00:03:32.338
そして開発者ツールのエレメンツで、見出しと段落が意図した構造になっているかを確認してください。

42
00:03:32.338 --> 00:03:37.690
見た目ではなく、構造が目的に合っているかを見るのがポイントです。

43
00:03:37.690 --> 00:03:43.209
写して終わりにせず、自分の文章に置き換えて試すと理解が深まります。

44
00:03:43.209 --> 00:03:46.052
構造を意識する習慣が身につきます。

45
00:03:46.052 --> 00:03:47.886
属性について確認します。

46
00:03:47.886 --> 00:03:53.694
エイチツーには、この要素だけのための専用属性で、必須となるものはありません。

47
00:03:53.694 --> 00:03:58.891
代わりに、どの要素にも使えるグローバル属性を、必要に応じて使います。

48
00:03:58.891 --> 00:04:00.114
代表は三つです。

49
00:04:00.114 --> 00:04:05.158
文書の中で重ならない識別子のアイディー、シーエスエスやジャバスクリプトでまとめて選ぶためのクラス、

50
00:04:05.158 --> 00:04:10.202
そして内容の言語を示すラングです。

51
00:04:10.202 --> 00:04:15.857
画面のようにアイディーを付ければ、目次からその見出しへ直接リンクできます。

52
00:04:15.857 --> 00:04:22.277
注意として、独自データを入れるデータ属性には、秘密情報を置かないようにしてください。

53
00:04:22.277 --> 00:04:27.779
属性を付ける前に、その見出しへリンクや装飾が本当に必要かを考えましょう。

54
00:04:27.779 --> 00:04:30.072
付けすぎも管理を難しくします。

55
00:04:30.072 --> 00:04:31.988
見た目との関係を整理します。

56
00:04:31.988 --> 00:04:39.103
ブラウザーの初期設定では、エイチツーはエイチワンより少し小さく、エイチスリーより少し大きく表示されます。

57
00:04:39.103 --> 00:04:42.524
ここで大切なのは、文字をこのくらいの大きさにしたいからエイチツーを選ぶ、

58
00:04:42.524 --> 00:04:45.944
という発想にしないことです。

59
00:04:45.944 --> 00:04:53.196
記事も、文字の大きさはシーエスエスで調整し、見た目だけを理由に見出しの階層を飛ばさないよう注意しています。

60
00:04:53.196 --> 00:04:59.354
見出しのレベルは文書の意味と階層で決め、文字の大きさや色、余白はシーエスエスで調整します。

61
00:04:59.354 --> 00:05:03.732
画面のように専用のルールを書けば、階層を保ったまま整えられます。

62
00:05:03.732 --> 00:05:07.563
余白や太さも合わせると、階層がより伝わりやすくなります。

63
00:05:07.563 --> 00:05:10.300
読み手が迷わない見た目を目指しましょう。

64
00:05:10.300 --> 00:05:12.988
次に、階層を飛ばさないコツです。

65
00:05:12.988 --> 00:05:19.541
よくある失敗は、エイチワンの直後にいきなりエイチスリーを置いてしまうことです。

66
00:05:19.541 --> 00:05:28.614
見た目が程よい大きさでも、文書のアウトラインは途中で途切れ、読み手も検索エンジンも構造を追いにくくなります。

67
00:05:28.614 --> 00:05:34.998
音声読み上げなどの支援技術では、利用者が見出しを頼りにページ内を移動します。

68
00:05:34.998 --> 00:05:40.039
エイチツーが正しく章を示していれば、その移動もスムーズです。

69
00:05:40.039 --> 00:05:44.911
迷ったら見出しだけを抜き出して眺めてみるのがおすすめです。

70
00:05:44.911 --> 00:05:48.943
章の題名として自然に読めるかを確認してください。

71
00:05:48.943 --> 00:05:53.480
階層の点検は、公開前の短い作業で大きな効果があります。

72
00:05:53.480 --> 00:05:56.840
見出し一覧だけを見る習慣をつけましょう。

73
00:05:56.840 --> 00:05:59.235
ブラウザー互換性を確認します。

74
00:05:59.235 --> 00:06:06.821
記事が参照するエムディーエヌのデータでは、エイチツー要素は、クロームが一以降、

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

76
00:06:14.406 --> 00:06:20.474
そのため、エイチツー自体が表示できない環境を心配する必要は、まずありません。

77
00:06:20.474 --> 00:06:23.029
ただし、これは要素本体の話です。

78
00:06:23.029 --> 00:06:28.618
新しい属性や機能を組み合わせる場合は、別途対応状況を確認してください。

79
00:06:28.618 --> 00:06:35.645
あわせて、アイオーエスやアンドロイドなど、利用対象の実機でも表示を試しておくと安心です。

80
00:06:35.645 --> 00:06:42.352
表示できることと、意図どおり読めることは別なので、本文の確認も欠かさないでください。

81
00:06:42.352 --> 00:06:44.268
安心して使える要素です。

82
00:06:44.268 --> 00:06:47.277
よくある間違いを三つ紹介します。

83
00:06:47.277 --> 00:06:56.303
一つ目は、本文の文章や注意書きのような、見出しではない文章までエイチツーで囲んでしまうことです。

84
00:06:56.303 --> 00:07:00.816
それは段落など、内容に合った要素で書きましょう。

85
00:07:00.816 --> 00:07:06.833
二つ目は、見た目を大きくしたいだけの理由でレベルを選ぶことです。

86
00:07:06.833 --> 00:07:12.474
これは前のセクションで触れたとおり、シーエスエスの担当です。

87
00:07:12.474 --> 00:07:17.551
三つ目は、中身のない空の見出しを残してしまうことです。

88
00:07:17.551 --> 00:07:20.936
空の見出しはアウトラインを乱します。

89
00:07:20.936 --> 00:07:28.458
書く前に、その文章が本当に章の題名かどうかを、一度立ち止まって確認してください。

90
00:07:28.458 --> 00:07:35.227
間違いに気づいたら、タグを置き換えるだけでなく階層全体を見直しましょう。

91
00:07:35.227 --> 00:07:38.800
少しの見直しで読みやすさが変わります。

92
00:07:38.800 --> 00:07:40.801
最後にまとめとチェックです。

93
00:07:40.801 --> 00:07:47.519
エイチツーは、六段階の見出しの二番目で、エイチワンの下で大きな章を分けるときに使う見出しです。

94
00:07:47.519 --> 00:07:52.808
専用の必須属性はなく、必要ならアイディーやクラスなどの共通属性を使います。

95
00:07:52.808 --> 00:07:58.453
公開前には、目的が第二階層を示すことに合っているか、階層を飛ばしていないか、

96
00:07:58.453 --> 00:08:04.099
三百二十ピクセル程度の狭い画面や文字拡大でも内容が欠けていないかを確認しましょう。

97
00:08:04.099 --> 00:08:11.103
自分のページで、大きな話題ごとに区切りたい場所があれば、ぜひエイチツーを正しく使ってみてください。

98
00:08:11.103 --> 00:08:12.390
お疲れさまでした。

99
00:08:12.390 --> 00:08:16.963
まずは手元のページの見出し一覧を書き出して点検してみてください。

100
00:08:16.963 --> 00:08:20.108
小さな確認の積み重ねが確かな土台になります。