WEBVTT

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

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

3
00:00:03.604 --> 00:00:07.979
エイチティーエムエルタグ編の七十一本目は、エイチファイブ、タグです。

4
00:00:07.979 --> 00:00:11.712
エイチファイブは、エイチワンからエイチシックスまで六段階ある見出しの中で、

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

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

7
00:00:20.464 --> 00:00:26.770
普段の短いページでは出番は少なめですが、長い記事や手順書では、内容を細かく整理する助けになります。

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

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

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

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

12
00:00:43.451 --> 00:00:48.958
エイチフォーと、数字が増えるごとに一段ずつ下の階層になります。

13
00:00:48.958 --> 00:00:53.561
エイチファイブは、そのエイチフォーのすぐ下に置かれます。

14
00:00:53.561 --> 00:00:59.315
本でいえば、章や節をさらに細かく分けた、小さな項目の題名にあたります。

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

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

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

18
00:01:16.904 --> 00:01:18.946
基本の書き方を確認します。

19
00:01:18.946 --> 00:01:25.542
エイチファイブは、開始タグと終了タグを両方書いて、その間に見出しの文章をはさみます。

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

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

22
00:01:38.421 --> 00:01:40.462
置き場所はボディの中です。

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

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

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

26
00:01:56.796 --> 00:01:59.483
では、どんな場面で使うのでしょうか。

27
00:01:59.483 --> 00:02:05.156
代表的なのは、エイチフォーで作った節を、さらに二つ、三つに分けたいときです。

28
00:02:05.156 --> 00:02:08.738
たとえば当日の流れという節の中で、受付の手順と会場への移動を分けて説明する、

29
00:02:08.738 --> 00:02:12.321
といった使い方です。

30
00:02:12.321 --> 00:02:16.127
逆に、エイチフォー自体を使っていない文書で、いきなりエイチファイブだけが現れる場面は、

31
00:02:16.127 --> 00:02:19.934
まずありません。

32
00:02:19.934 --> 00:02:24.114
また記事が伝えるように、階層が深くなりすぎたと感じたら、無理に深くせず、

33
00:02:24.114 --> 00:02:28.293
文書自体を分けることも検討してください。

34
00:02:28.293 --> 00:02:31.279
必要かどうかは、文書の長さで判断します。

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

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

37
00:02:37.539 --> 00:02:42.430
例の中心は、エイチファイブの見出しと、その説明を書いた段落の組み合わせです。

38
00:02:42.430 --> 00:02:48.608
ここではセクションの中で、エイチフォーの下にエイチファイブを置き、細かい話題を切り分けています。

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

40
00:02:52.534 --> 00:02:56.459
保存後に再読み込みします。

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

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

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

44
00:03:10.875 --> 00:03:12.553
属性について確認します。

45
00:03:12.553 --> 00:03:18.146
エイチファイブには、この要素だけのための専用属性で、必須となるものはありません。

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

47
00:03:22.900 --> 00:03:24.019
代表は三つです。

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

49
00:03:28.633 --> 00:03:33.247
そして内容の言語を示すラングです。

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

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

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

53
00:03:49.327 --> 00:03:51.520
見た目との関係を整理します。

54
00:03:51.520 --> 00:03:57.630
ブラウザーの初期設定では、エイチファイブは上位の見出しより小さく表示されます。

55
00:03:57.630 --> 00:04:04.679
ここで大切なのは、文字を小さくしたいからエイチファイブを選ぶ、という発想にしないことです。

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

57
00:04:11.728 --> 00:04:19.404
画面のように、エイチファイブ専用のルールを書けば、階層を保ったまま読みやすい見た目に整えられます。

58
00:04:19.404 --> 00:04:24.260
意味と見た目を分けて考えることが、長く使えるコードのコツです。

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

60
00:04:28.647 --> 00:04:34.756
色だけで階層を伝えるのではなく、余白や太さも組み合わせると読みやすくなります。

61
00:04:34.756 --> 00:04:37.179
次に、階層を飛ばさないコツです。

62
00:04:37.179 --> 00:04:43.236
よくある失敗は、エイチツーの直後にいきなりエイチファイブを置いてしまうことです。

63
00:04:43.236 --> 00:04:51.867
見た目が小さくて都合がよくても、文書のアウトラインは途中で途切れ、読み手も検索エンジンも構造を追いにくくなります。

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

65
00:04:57.622 --> 00:05:00.802
階層が正しければ、その移動もスムーズです。

66
00:05:00.802 --> 00:05:09.433
エイチワンから順に一段ずつ深くしていき、それでも深くなりすぎる場合は、記事の助言どおり文書の分割も考えてください。

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

68
00:05:13.976 --> 00:05:16.251
ブラウザー互換性を確認します。

69
00:05:16.251 --> 00:05:23.606
記事が参照するエムディーエヌのデータでは、エイチファイブ要素は、クロームが一以降、

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

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

72
00:05:37.027 --> 00:05:39.454
ただし、これは要素本体の話です。

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

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

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

76
00:05:57.804 --> 00:05:59.967
よくある間違いを三つ紹介します。

77
00:05:59.967 --> 00:06:06.320
一つ目は、脚注や注意書きのような、見出しではない文章までエイチファイブで囲んでしまうことです。

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

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

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

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

82
00:06:21.595 --> 00:06:24.028
空の見出しはアウトラインを乱します。

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

84
00:06:29.435 --> 00:06:32.544
気づいたら、階層全体も合わせて見直しましょう。

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

86
00:06:37.410 --> 00:06:39.443
最後にまとめとチェックです。

87
00:06:39.443 --> 00:06:46.412
エイチファイブは、六段階の見出しの五番目で、エイチフォーの節をさらに分けるときに使う見出しです。

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

89
00:06:51.784 --> 00:06:57.520
公開前には、目的が第五階層を示すことに合っているか、階層を飛ばしていないか、

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

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

92
00:07:09.789 --> 00:07:11.096
お疲れさまでした。

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