WEBVTT

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

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

3
00:00:03.562 --> 00:00:07.760
エイチティーエムエルタグ編の七十二本目は、エイチフォー、タグです。

4
00:00:07.760 --> 00:00:11.386
エイチフォーは、エイチワンからエイチシックスまで六段階ある見出しの中で、

5
00:00:11.386 --> 00:00:15.011
四番目の深さにあたる第四階層を担当します。

6
00:00:15.011 --> 00:00:19.973
エイチスリーで作った節を、さらに小さなまとまりに分けたいときに使う見出しです。

7
00:00:19.973 --> 00:00:24.425
長い記事やマニュアルでは出番が多く、内容を細かく整理する要になります。

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

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

10
00:00:32.185 --> 00:00:34.348
焦らず一歩ずつ進めていきましょう。

11
00:00:34.348 --> 00:00:37.598
まず、見出し全体の中での位置を押さえます。

12
00:00:37.598 --> 00:00:42.242
エイチワンが文書全体を表す最も大きな見出しで、エイチツー、エイチスリーと、

13
00:00:42.242 --> 00:00:46.885
数字が増えるごとに一段ずつ下の階層になります。

14
00:00:46.885 --> 00:00:51.064
エイチフォーは、そのエイチスリーのすぐ下に置かれます。

15
00:00:51.064 --> 00:00:56.172
本でいえば、章の中の節を、さらに項目ごとに分けた題名にあたります。

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

17
00:01:01.899 --> 00:01:08.245
題名は内容が具体的に伝わる言葉にし、階層を飛ばさず順番に深くしていくのが基本です。

18
00:01:08.245 --> 00:01:12.733
この階層の考え方は、目次を作るときにもそのまま役立ちます。

19
00:01:12.733 --> 00:01:16.448
番号と階層を常にセットで覚えておくと迷いません。

20
00:01:16.448 --> 00:01:18.652
基本の書き方を確認します。

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

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

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

24
00:01:39.509 --> 00:01:41.714
置き場所はボディの中です。

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

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

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

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

29
00:02:03.588 --> 00:02:06.648
では、どんな場面で使うのでしょうか。

30
00:02:06.648 --> 00:02:13.108
代表的なのは、エイチスリーで作った節を、さらに二つ、三つに分けたいときです。

31
00:02:13.108 --> 00:02:17.359
たとえば申し込み手順という節の中で、フォームの入力と内容の確認を分けて説明する、

32
00:02:17.359 --> 00:02:21.609
といった使い方です。

33
00:02:21.609 --> 00:02:25.859
逆に、エイチスリー自体を使っていない文書で、いきなりエイチフォーだけが現れる場面は、

34
00:02:25.859 --> 00:02:30.109
まずありません。

35
00:02:30.109 --> 00:02:36.400
見出しは、見出しだけを読んでも文章の流れが分かる題名にすることが大切です。

36
00:02:36.400 --> 00:02:41.670
必要かどうかは、節の中身が複数に分かれるかで判断してください。

37
00:02:41.670 --> 00:02:46.600
実際に使うかどうかは、文書の長さと深さで判断してください。

38
00:02:46.600 --> 00:02:48.898
記事の活用事例を読み解きます。

39
00:02:48.898 --> 00:02:54.566
例の中心は、エイチフォーの見出しと、その説明を書いた段落の組み合わせです。

40
00:02:54.566 --> 00:03:01.766
ここではセクションの中で、エイチスリーの下にエイチフォーを置き、細かい話題を切り分けています。

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

42
00:03:06.438 --> 00:03:11.111
保存後に再読み込みします。

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

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

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

46
00:03:28.268 --> 00:03:30.413
属性について確認します。

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

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

49
00:03:43.465 --> 00:03:44.895
代表は三つです。

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

51
00:03:50.795 --> 00:03:56.695
そして内容の言語を示すラングです。

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

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

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

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

56
00:04:19.522 --> 00:04:25.673
ブラウザーの初期設定では、エイチフォーは上位の見出しより小さく表示されます。

57
00:04:25.673 --> 00:04:32.794
ここで大切なのは、文字を小さくしたいからエイチフォーを選ぶ、という発想にしないことです。

58
00:04:32.794 --> 00:04:38.297
記事も、文字サイズの好みで見出しレベルを選ばないよう注意しています。

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

60
00:04:45.581 --> 00:04:52.217
画面のように専用のルールを書けば、階層を保ったまま読みやすい見た目に整えられます。

61
00:04:52.217 --> 00:04:55.616
意味と見た目を分けて考えることが大切です。

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

63
00:05:00.148 --> 00:05:02.647
次に、階層を飛ばさないコツです。

64
00:05:02.647 --> 00:05:08.739
よくある失敗は、エイチツーの直後にいきなりエイチフォーを置いてしまうことです。

65
00:05:08.739 --> 00:05:13.426
見た目が程よく小さくて都合がよくても、文書のアウトラインは途中で途切れ、

66
00:05:13.426 --> 00:05:18.112
読み手も検索エンジンも構造を追いにくくなります。

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

68
00:05:24.048 --> 00:05:27.328
階層が正しければ、その移動もスムーズです。

69
00:05:27.328 --> 00:05:34.982
エイチワンから順に一段ずつ深くしていき、迷ったら見出しだけを抜き出して眺めてみるのがおすすめです。

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

71
00:05:39.200 --> 00:05:41.271
ブラウザー互換性を確認します。

72
00:05:41.271 --> 00:05:47.899
記事が参照するエムディーエヌのデータでは、エイチフォー要素は、クロームが一以降、

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

74
00:05:54.527 --> 00:05:59.911
そのため、エイチフォー自体が表示できない環境を心配する必要は、まずありません。

75
00:05:59.911 --> 00:06:02.121
ただし、これは要素本体の話です。

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

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

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

79
00:06:18.828 --> 00:06:21.589
よくある間違いを三つ紹介します。

80
00:06:21.589 --> 00:06:29.527
一つ目は、脚注や注意書きのような、見出しではない文章までエイチフォーで囲んでしまうことです。

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

82
00:06:33.669 --> 00:06:39.191
二つ目は、見た目を小さくしたいだけの理由でレベルを選ぶことです。

83
00:06:39.191 --> 00:06:44.368
これは前のセクションで触れたとおり、シーエスエスの担当です。

84
00:06:44.368 --> 00:06:49.027
三つ目は、中身のない空の見出しを残してしまうことです。

85
00:06:49.027 --> 00:06:52.133
空の見出しはアウトラインを乱します。

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

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

88
00:07:05.248 --> 00:07:07.450
最後にまとめとチェックです。

89
00:07:07.450 --> 00:07:14.843
エイチフォーは、六段階の見出しの四番目で、エイチスリーの節をさらに分けるときに使う見出しです。

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

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

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

93
00:07:33.090 --> 00:07:40.011
自分の長い文書で、細かく分けたい節があれば、ぜひエイチフォーを正しく使ってみてください。

94
00:07:40.011 --> 00:07:41.426
お疲れさまでした。

95
00:07:41.426 --> 00:07:46.460
まずは手元のページの見出し一覧を書き出して点検してみてください。