WEBVTT

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

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

3
00:00:04.216 --> 00:00:09.185
エイチティーエムエルタグ編の七十三本目は、エイチスリー、タグです。

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

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

6
00:00:17.768 --> 00:00:24.393
エイチツーで作った大きな章を、さらに読みやすいまとまりに分けたいときに使う小見出しです。

7
00:00:24.393 --> 00:00:30.266
ブログの記事でも解説ページでも出番が多く、文章の骨組みを作る中心的な存在です。

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

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

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

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

12
00:00:45.339 --> 00:00:55.940
エイチワンが文書全体を表す最も大きな見出しで、エイチツーがその下の章、エイチスリーはエイチツーの章をさらに分けた節にあたります。

13
00:00:55.940 --> 00:01:01.241
本でいえば、章の中にある節の題名と考えると分かりやすいでしょう。

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

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

16
00:01:14.162 --> 00:01:19.628
この考え方は、目次やアウトラインを作るときにもそのまま役立ちます。

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

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

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

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

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

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

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

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

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

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

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

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

29
00:02:13.981 --> 00:02:20.612
代表的なのは、エイチツーで作った章の中身が長くなり、二つ、三つの話題に分けたいときです。

30
00:02:20.612 --> 00:02:24.305
たとえば参加方法という章の中で、申し込み手順と参加費の支払いを分けて説明する、

31
00:02:24.305 --> 00:02:27.997
といった使い方です。

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

33
00:02:31.690 --> 00:02:35.382
まずありません。

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

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

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

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

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

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

40
00:03:02.007 --> 00:03:09.160
ここではセクションの中で、エイチツーの下にエイチスリーを置き、一つの話題を切り分けています。

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

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

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

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

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

46
00:03:36.064 --> 00:03:38.708
構造を意識する習慣が身につきます。

47
00:03:38.708 --> 00:03:40.698
属性について確認します。

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

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

50
00:03:52.806 --> 00:03:54.132
代表は三つです。

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

52
00:03:59.606 --> 00:04:05.079
そして内容の言語を示すラングです。

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

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

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

56
00:04:24.152 --> 00:04:26.640
付けすぎも管理を難しくします。

57
00:04:26.640 --> 00:04:28.574
見た目との関係を整理します。

58
00:04:28.574 --> 00:04:35.898
ブラウザーの初期設定では、エイチスリーはエイチツーより少し小さく、エイチフォーより少し大きく表示されます。

59
00:04:35.898 --> 00:04:39.421
ここで大切なのは、文字をこのくらいの大きさにしたいからエイチスリーを選ぶ、

60
00:04:39.421 --> 00:04:42.945
という発想にしないことです。

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

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

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

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

65
00:05:04.776 --> 00:05:07.540
読み手が迷わない見た目を目指しましょう。

66
00:05:07.540 --> 00:05:09.740
次に、階層を飛ばさないコツです。

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

68
00:05:15.104 --> 00:05:19.230
見た目が程よい大きさで都合がよくても、文書のアウトラインは途中で途切れ、

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

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

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

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

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

74
00:05:41.921 --> 00:05:44.672
見出し一覧だけを見る習慣をつけましょう。

75
00:05:44.672 --> 00:05:46.980
ブラウザー互換性を確認します。

76
00:05:46.980 --> 00:05:54.367
記事が参照するエムディーエヌのデータでは、エイチスリー要素は、クロームが一以降、

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

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

79
00:06:07.755 --> 00:06:10.217
ただし、これは要素本体の話です。

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

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

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

83
00:06:28.837 --> 00:06:30.684
安心して使える要素です。

84
00:06:30.684 --> 00:06:33.606
よくある間違いを三つ紹介します。

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

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

87
00:06:46.936 --> 00:06:53.693
二つ目は、見た目をほどよい大きさにしたいだけの理由でレベルを選ぶことです。

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

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

90
00:07:04.101 --> 00:07:07.388
空の見出しはアウトラインを乱します。

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

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

93
00:07:21.266 --> 00:07:24.736
少しの見直しで読みやすさが変わります。

94
00:07:24.736 --> 00:07:26.713
最後にまとめとチェックです。

95
00:07:26.713 --> 00:07:33.351
エイチスリーは、六段階の見出しの三番目で、エイチツーの章をさらに分けるときに使う小見出しです。

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

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

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

99
00:07:49.735 --> 00:07:56.090
自分の記事で、章の中を整理したい場所があれば、ぜひエイチスリーを正しく使ってみてください。

100
00:07:56.090 --> 00:07:57.361
お疲れさまでした。

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

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