WEBVTT

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

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

3
00:00:03.425 --> 00:00:07.584
エイチティーエムエルタグ編の六十七本目は、エイチグループ、タグです。

4
00:00:07.584 --> 00:00:13.210
このタグは、大きな見出しと、それを補う短い副題を、ひとつのまとまりとして示すための要素です。

5
00:00:13.210 --> 00:00:19.693
たとえば、ページのタイトルがあって、そのすぐ下にキャッチコピーが添えられている場面を思い浮かべてください。

6
00:00:19.693 --> 00:00:25.442
見た目が近いだけではなく、この二つはセットですよ、とプログラムにも伝えられるのがポイントです。

7
00:00:25.442 --> 00:00:30.090
複数の章の見出しを束ねる道具ではない、という点も最初に押さえておきましょう。

8
00:00:30.090 --> 00:00:33.148
タイトルの周りは、読み手が最初に目にする場所です。

9
00:00:33.148 --> 00:00:36.940
だからこそ、意味のまとまりをはっきりさせる価値が大きいのです。

10
00:00:36.940 --> 00:00:39.004
基本の書き方を確認します。

11
00:00:39.004 --> 00:00:44.880
エイチグループは、開始タグと終了タグを両方書く、普通の入れ物型の要素です。

12
00:00:44.880 --> 00:00:48.056
その中には、見出しをひとつだけ入れます。

13
00:00:48.056 --> 00:00:49.802
例ではエイチワンです。

14
00:00:49.802 --> 00:00:55.519
そして見出しに寄り添う副題やキャッチコピーは、段落を表すピーで書きます。

15
00:00:55.519 --> 00:00:57.742
ここが一番大切な決まりです。

16
00:00:57.742 --> 00:01:03.300
副題だからといって、エイチツーのような次のレベルの見出しにはしません。

17
00:01:03.300 --> 00:01:08.540
見出しはひとつ、補足はピー、この組み合わせをまず体で覚えましょう。

18
00:01:08.540 --> 00:01:13.939
書き終えたら、入れ物の開始と終了がそろっているかも確認してください。

19
00:01:13.939 --> 00:01:19.974
この形は、記事のタイトルでも、ページの先頭でも、まったく同じように使えます。

20
00:01:19.974 --> 00:01:22.832
まずは型として覚えてしまいましょう。

21
00:01:22.832 --> 00:01:26.409
中に入れられるものを、もう少し詳しく整理します。

22
00:01:26.409 --> 00:01:31.626
見出しは、エイチワンからエイチシックスの中から、どれかひとつだけです。

23
00:01:31.626 --> 00:01:38.035
章の見出しならエイチツー、というように、文書全体の階層に合ったレベルを選んでください。

24
00:01:38.035 --> 00:01:41.314
副題のピーは、ひとつでも複数でも構いません。

25
00:01:41.314 --> 00:01:45.040
日付や対象者など、短い補足を並べることもできます。

26
00:01:45.040 --> 00:01:49.661
反対に、画像やリスト、ディブのような別の要素は中に入れません。

27
00:01:49.661 --> 00:01:56.219
エイチグループは見出し周り専用の小さな入れ物だと考えると、迷わずに書けるようになります。

28
00:01:56.219 --> 00:02:02.479
迷ったときは、中身が短い補足かどうかを声に出して読んでみると、判断しやすくなります。

29
00:02:02.479 --> 00:02:05.460
長い文章なら本文として外に出しましょう。

30
00:02:05.460 --> 00:02:10.280
インターネットで調べると、昔の書き方に出会うことがあります。

31
00:02:10.280 --> 00:02:18.955
かつては、エイチワンとエイチツーをエイチグループで束ねて、一組の見出しとして扱う考え方が紹介されていました。

32
00:02:18.955 --> 00:02:22.971
しかし現在の仕様では、その理解は改められています。

33
00:02:22.971 --> 00:02:27.791
副題をエイチツーにしてしまうと、文書の目次構造の中で本物の章見出しと混ざってしまい、

34
00:02:27.791 --> 00:02:32.611
読み上げでたどる利用者が混乱します。

35
00:02:32.611 --> 00:02:37.270
副題をピーにしておけば、見出しの階層はすっきり保たれます。

36
00:02:37.270 --> 00:02:43.053
古い記事の例を見かけたら、今のルールに置き換えて読むようにしてください。

37
00:02:43.053 --> 00:02:51.568
見出しの階層が正しく保たれると、検索や目次生成のときにも、文書の構造がそのまま正しく伝わるようになります。

38
00:02:51.568 --> 00:02:53.404
属性について確認します。

39
00:02:53.404 --> 00:02:57.841
エイチグループには、この要素だけの専用の属性はありません。

40
00:02:57.841 --> 00:03:02.737
覚えるべき必須の属性もないので、初心者にとっては気楽なタグです。

41
00:03:02.737 --> 00:03:06.867
必要に応じて、どの要素にも使える共通の属性を使います。

42
00:03:06.867 --> 00:03:12.987
たとえばクラスは、シーエスエスで見出し周りをまとめて整えるときの目印になります。

43
00:03:12.987 --> 00:03:18.189
アイディーはページ内リンクの飛び先に、ラングは言語の指定に使えます。

44
00:03:18.189 --> 00:03:22.014
ただし属性を付けても要素の意味自体は変わりません。

45
00:03:22.014 --> 00:03:30.275
副題らしく小さく見せたい、余白を広げたい、といった見た目の調整は、属性ではなくシーエスエスで指定しましょう。

46
00:03:30.275 --> 00:03:36.701
データ属性については、秘密情報を置く場所ではない点も、あわせて覚えておいてください。

47
00:03:36.701 --> 00:03:38.996
公開される前提で使う属性です。

48
00:03:38.996 --> 00:03:41.371
記事の活用事例を読み解きます。

49
00:03:41.371 --> 00:03:47.070
例では、エイチワンに学習会の名前である、まなびのアトリエ、と書き、その下のピーに、

50
00:03:47.070 --> 00:03:52.770
自分の手でウェブサイトを作る学習会、という説明を添えています。

51
00:03:52.770 --> 00:03:57.123
もしこの二行がバラバラに置かれていると、下の文が本文の最初の段落なのか、

52
00:03:57.123 --> 00:04:01.477
タイトルの補足なのかが曖昧になります。

53
00:04:01.477 --> 00:04:08.285
エイチグループで囲むことで、これはタイトルとその副題の一組だと、はっきり示せるのです。

54
00:04:08.285 --> 00:04:18.258
試すときは練習用ファイルのボディに貼り付け、保存して再読み込みし、開発者ツールのエレメンツで入れ子が正しいか確認してください。

55
00:04:18.258 --> 00:04:26.016
ブラウザーで見たときは、二行が近づいて一組らしく見えるか、本文との間隔も含めて眺めてみてください。

56
00:04:26.016 --> 00:04:29.032
使う場面を広げて考えてみましょう。

57
00:04:29.032 --> 00:04:35.772
代表例は、サイトのトップで大きなタイトルとキャッチコピーを組にする場面です。

58
00:04:35.772 --> 00:04:46.771
ほかにも、ブログ記事のタイトルに短い要約を添える場合や、イベントページで講座名と開催日の補足を組にする場合にも向いています。

59
00:04:46.771 --> 00:04:51.738
画面の例では、記事の中でエイチツーとピーを使っています。

60
00:04:51.738 --> 00:04:58.833
逆に、副題らしい補足が何もない見出しなら、エイチグループで囲む必要はありません。

61
00:04:58.833 --> 00:05:01.317
見出し単体のままで十分です。

62
00:05:01.317 --> 00:05:06.284
副題があるかどうかが、使うかどうかの判断基準になります。

63
00:05:06.284 --> 00:05:15.508
ヘッダーの中や、セクションの先頭など、見出しが置かれる場所なら、どこでも同じ考え方で使うことができます。

64
00:05:15.508 --> 00:05:17.889
見た目はシーエスエスで整えます。

65
00:05:17.889 --> 00:05:23.841
エイチグループにクラスを付けておくと、見出しと副題をまとめて指定できて便利です。

66
00:05:23.841 --> 00:05:27.784
画面の例では、全体を中央揃えにして上下に余白を取り、副題のピーは少し小さく、

67
00:05:27.784 --> 00:05:31.727
落ち着いたグレーにしています。

68
00:05:31.727 --> 00:05:38.572
こうした調整をエイチグループ単位で行えるのも、ひとかたまりとして囲んでおく実用的な利点です。

69
00:05:38.572 --> 00:05:40.655
ここでも役割分担は同じです。

70
00:05:40.655 --> 00:05:48.541
タイトルと副題の組であるという意味はエイチティーエムエルが持ち、色や大きさや配置はシーエスエスが持ちます。

71
00:05:48.541 --> 00:05:52.856
デザインを変えたくなっても、構造には手を入れずに済みます。

72
00:05:52.856 --> 00:05:56.576
色を変えるときも、副題だけを少し控えめにすると、主見出しとの主従関係が、

73
00:05:56.576 --> 00:06:00.296
目で見ても自然に伝わります。

74
00:06:00.296 --> 00:06:02.853
よくある間違いを三つ紹介します。

75
00:06:02.853 --> 00:06:08.926
一つ目は、エイチワンとエイチツーのように、見出しを複数入れてしまうことです。

76
00:06:08.926 --> 00:06:13.561
章の見出しはエイチグループの外に、独立して置いてください。

77
00:06:13.561 --> 00:06:18.835
二つ目は、副題だけでなく本文の段落まで一緒に囲ってしまうことです。

78
00:06:18.835 --> 00:06:23.630
中に入れるピーは、あくまで見出しへの短い補足だけに絞ります。

79
00:06:23.630 --> 00:06:28.744
三つ目は、見た目をそろえるためだけに何でも囲ってしまうことです。

80
00:06:28.744 --> 00:06:32.899
意味のない囲みは、かえって構造を分かりにくくします。

81
00:06:32.899 --> 00:06:38.813
公開前に、中身が見出しひとつと副題だけか、一度読み返す習慣を付けましょう。

82
00:06:38.813 --> 00:06:46.644
特に二つ目は起こりがちなので、囲む範囲を決めるときは、副題の行までで止めることを意識してください。

83
00:06:46.644 --> 00:06:48.780
ブラウザー互換性を確認します。

84
00:06:48.780 --> 00:06:55.332
記事が参照するエムディーエヌのデータでは、エイチグループ要素は、クロームが五以降、

85
00:06:55.332 --> 00:07:01.883
エッジが十二以降、ファイアフォックスが四以降、サファリが五以降と、主要ブラウザーで長く対応しています。

86
00:07:01.883 --> 00:07:06.298
そのため、表示できない環境を心配する必要はほとんどありません。

87
00:07:06.298 --> 00:07:08.862
仕上げのチェックもしておきましょう。

88
00:07:08.862 --> 00:07:14.203
目的が主見出しと副題をまとめることに合っているか、見出しがひとつだけか、

89
00:07:14.203 --> 00:07:19.544
三百二十ピクセル程度の狭い画面や文字拡大でも副題が欠けていないかを確認します。

90
00:07:19.544 --> 00:07:22.535
モバイルの実機でも一度見ておくと安心です。

91
00:07:22.535 --> 00:07:29.656
対応が広い分、このタグでは、使えるかどうかよりも、正しい意味で使えているかに集中できるのが利点です。

92
00:07:29.656 --> 00:07:31.060
最後にまとめです。

93
00:07:31.060 --> 00:07:34.023
エイチグループのポイントは三つでした。

94
00:07:34.023 --> 00:07:40.886
一つ目、エイチグループは一つの見出しと、その副題をひとかたまりとして示す要素であること。

95
00:07:40.886 --> 00:07:48.685
二つ目、中の見出しはひとつだけで、副題はエイチツーではなくピーで書き、昔の束ねる使い方とは違うこと。

96
00:07:48.685 --> 00:07:54.300
三つ目、専用の属性はなく、見た目の調整はクラスとシーエスエスで行うこと。

97
00:07:54.300 --> 00:07:58.589
練習として、自分のページでタイトルとキャッチコピーが並んでいる場所を探し、

98
00:07:58.589 --> 00:08:02.878
エイチグループで囲んでみてください。

99
00:08:02.878 --> 00:08:04.282
お疲れさまでした。

100
00:08:04.282 --> 00:08:07.869
その一組が正しく組めれば、このタグは卒業です。

101
00:08:07.869 --> 00:08:15.980
次に学ぶヘッダーなどの要素と組み合わせると、ページの先頭部分の構造が、さらに分かりやすく整っていきます。