WEBVTT

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

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

3
00:00:04.283 --> 00:00:07.800
HTMLタグ編の十九本目は、サマリータグです。

4
00:00:07.800 --> 00:00:14.224
これは、折りたたみ表示の見出しになるタグで、ディテールズタグと必ずセットで使います。

5
00:00:14.224 --> 00:00:20.954
よくある質問ページで、質問の行をクリックすると答えが開く、あの質問の部分がサマリーです。

6
00:00:20.954 --> 00:00:26.078
今回は、どんな場面で使うのか、基本の書き方、コード例、分かりやすい見出しの書き方、

7
00:00:26.078 --> 00:00:31.202
使うときの注意点まで、初心者向けに順番に解説します。

8
00:00:31.202 --> 00:00:37.014
折りたたみは、長いページをすっきり見せるための、ブラウザー標準の仕組みです。

9
00:00:37.014 --> 00:00:41.908
ジャバスクリプトなしでも動く点も、初心者にとって大きな魅力です。

10
00:00:41.908 --> 00:00:45.674
まず、どんな場面で使うかを整理しましょう。

11
00:00:45.674 --> 00:00:47.288
代表例は三つです。

12
00:00:47.288 --> 00:00:54.821
一つ目は、よくある質問で、質問文をサマリーにして、答えを閉じた状態で置く使い方です。

13
00:00:54.821 --> 00:01:02.891
二つ目は補足説明の入口で、最初は概要だけを見せ、知りたい人だけが詳細を開けるようにします。

14
00:01:02.891 --> 00:01:10.782
三つ目は、長いページの整理で、項目ごとに開閉できる形にすると、全体を眺めやすくなります。

15
00:01:10.782 --> 00:01:15.983
大切なのは、開く前に中身が予想できる見出しにすることです。

16
00:01:15.983 --> 00:01:20.287
ここを開く、だけでは何が出てくるか分かりません。

17
00:01:20.287 --> 00:01:25.488
必要な情報だけを開いて読めるので、読む人の負担が減ります。

18
00:01:25.488 --> 00:01:33.200
逆に、短い注意書きまで何でも閉じてしまうと、かえって読みにくくなるので注意しましょう。

19
00:01:33.200 --> 00:01:34.482
基本の書き方です。

20
00:01:34.482 --> 00:01:39.896
サマリーは開始タグと終了タグを明示し、ディテールズの最初の子として置きます。

21
00:01:39.896 --> 00:01:43.529
コード例のように、外側にディテールズ、その一行目にサマリー、続いて答えの段落、

22
00:01:43.529 --> 00:01:47.162
という順番が基本形です。

23
00:01:47.162 --> 00:01:53.716
サマリーは一つのディテールズに一つだけ置き、二つ目以降を置いても見出しとしては扱われません。

24
00:01:53.716 --> 00:01:59.842
文章の中にぽつんと置くのではなく、必ず親のディテールズと一緒に書く、と覚えてください。

25
00:01:59.842 --> 00:02:04.687
まずはこの三行の形を写して、クリックで開閉できるか試してみましょう。

26
00:02:04.687 --> 00:02:10.955
入れ子の順番を間違えると、ブラウザーが自動で補正して、思った構造とずれることがあります。

27
00:02:10.955 --> 00:02:15.372
書き終えたら、表示だけでなく構造も確認する習慣を付けましょう。

28
00:02:15.372 --> 00:02:18.721
記事の活用事例を、少し広げて見てみましょう。

29
00:02:18.721 --> 00:02:22.832
テーマは、開閉操作のラベルを分かりやすくすることです。

30
00:02:22.832 --> 00:02:26.334
一つ目は参加費はかかりますか、という質問で、答えは無料です、交通費のみご負担ください、

31
00:02:26.334 --> 00:02:29.836
です。

32
00:02:29.836 --> 00:02:33.794
二つ目は持ち物はありますか、という質問を並べました。

33
00:02:33.794 --> 00:02:38.970
質問が並んでいるだけで、知りたい項目だけを開いて読める形になります。

34
00:02:38.970 --> 00:02:44.908
試すときは、練習用ファイルの本文にこの例を貼り付けて保存し、再読み込みして、

35
00:02:44.908 --> 00:02:50.846
クリックやタップで開閉できるかを、開発者ツールのエレメンツでも確認してください。

36
00:02:50.846 --> 00:02:55.718
同じ形を繰り返せるので、質問が増えても追加しやすいのが利点です。

37
00:02:55.718 --> 00:03:01.960
質問の順番は、読む人がよく知りたがるものから並べると、より親切なページになります。

38
00:03:01.960 --> 00:03:04.592
見出しの文章の書き方も大切です。

39
00:03:04.592 --> 00:03:10.678
記事が繰り返し伝えているのは、操作内容が分かる文章にする、ということです。

40
00:03:10.678 --> 00:03:16.434
たとえば、詳細はこちら、とだけ書くと、開くまで何の詳細か分かりません。

41
00:03:16.434 --> 00:03:24.494
それよりも、参加費はかかりますか、返品の条件について、のように、中身そのものを表す文にしましょう。

42
00:03:24.494 --> 00:03:28.442
長すぎる説明文を見出しに入れる必要はありません。

43
00:03:28.442 --> 00:03:32.883
短くても、開いたら何が読めるかが伝わる一文が理想です。

44
00:03:32.883 --> 00:03:38.475
読む人が、開くかどうかをその場で判断できる見出しを目指してください。

45
00:03:38.475 --> 00:03:45.712
見出しが具体的だと、検索で訪れた人も、自分の知りたい答えがどこにあるか一目で分かります。

46
00:03:45.712 --> 00:03:51.140
迷ったら、読む人が口にする質問の言葉をそのまま使ってみてください。

47
00:03:51.140 --> 00:03:53.950
ディテールズとの関係を押さえましょう。

48
00:03:53.950 --> 00:03:59.719
開閉という仕組みの本体は親のディテールズで、サマリーはその顔になる見出しです。

49
00:03:59.719 --> 00:04:05.487
閉じているときもサマリーだけは常に見えていて、ここを押すことで中身が開きます。

50
00:04:05.487 --> 00:04:09.480
もしサマリーを書き忘れると、ブラウザーが詳細、といった既定の見出しを自動で表示しますが、

51
00:04:09.480 --> 00:04:13.474
内容は伝わりません。

52
00:04:13.474 --> 00:04:19.834
コード例のように、ディテールズにオープンを付けると、最初から開いた状態で表示できます。

53
00:04:19.834 --> 00:04:24.271
最初から見せたい項目だけに使い、付けすぎには注意しましょう。

54
00:04:24.271 --> 00:04:28.856
サマリーを押すたびに、ディテールズの開閉状態が切り替わります。

55
00:04:28.856 --> 00:04:34.920
この動きはブラウザーが用意したものなので、自分で開閉の処理を書く必要はありません。

56
00:04:34.920 --> 00:04:37.208
サマリーの属性についてです。

57
00:04:37.208 --> 00:04:41.783
記事の通り、この要素に必須となる専用の属性はありません。

58
00:04:41.783 --> 00:04:46.686
必要に応じて、グローバル属性と呼ばれる共通の属性を使います。

59
00:04:46.686 --> 00:04:52.160
アイディーは文書内で一意な識別子、クラスはシーエスエスやジャバスクリプトで複数の要素をまとめて選ぶ目印、

60
00:04:52.160 --> 00:04:57.635
ラングは内容の言語の指定です。

61
00:04:57.635 --> 00:05:04.171
データ属性にはアプリ独自の値を保持できますが、秘密情報を置く場所ではありません。

62
00:05:04.171 --> 00:05:12.996
開いた状態かどうかは、親のディテールズ側のオープンで表すもので、サマリーの属性ではない点にも注意しましょう。

63
00:05:12.996 --> 00:05:20.840
コード例のようにクラスを付ければ、質問の見出しだけ文字を大きくしたり、背景色を付けたりできます。

64
00:05:20.840 --> 00:05:25.252
属性は必要になったときに足す、という考え方で十分です。

65
00:05:25.252 --> 00:05:28.450
シーエスエスとの関係も確認しましょう。

66
00:05:28.450 --> 00:05:33.163
サマリーには、ブラウザーの標準表示で、先頭に小さな三角のマーカーが付き、

67
00:05:33.163 --> 00:05:37.876
クリックできる見出しとして表示されます。

68
00:05:37.876 --> 00:05:43.599
文字の大きさや色、マーカーの表示などは、シーエスエスで調整できます。

69
00:05:43.599 --> 00:05:51.846
ただし、マーカーを消してただの文章のように見せてしまうと、開けることに気づいてもらえなくなります。

70
00:05:51.846 --> 00:05:57.232
見た目を整えるときも、押せることが伝わる手がかりは残しましょう。

71
00:05:57.232 --> 00:06:03.965
意味はサマリーが担い、見た目の微調整はシーエスエス、と分けて考えるのが基本です。

72
00:06:03.965 --> 00:06:12.718
たとえば、開いているときと閉じているときでマーカーの向きが変わるのも、標準の分かりやすい工夫の一つです。

73
00:06:12.718 --> 00:06:18.272
装飾を変えるときは、その分かりやすさを損なわないか確かめましょう。

74
00:06:18.272 --> 00:06:21.619
注意点と、よくある間違いを確認します。

75
00:06:21.619 --> 00:06:27.608
一番大切なのは、サマリーの中に別のリンクやボタンを混ぜないことです。

76
00:06:27.608 --> 00:06:37.120
見出し自体が開閉の操作対象なので、中にもう一つ押せるものがあると、どちらが押されたのか分かりにくくなります。

77
00:06:37.120 --> 00:06:40.290
リンクは説明本文の側へ分けましょう。

78
00:06:40.290 --> 00:06:48.569
次に、タブキーで移動してエンターやスペースで開閉できるか、キーボードだけでも確認してください。

79
00:06:48.569 --> 00:06:58.786
最後に、三百二十ピクセル程度の狭い画面や文字拡大時にも、見出しが欠けたり押しにくくなったりしないかを確かめましょう。

80
00:06:58.786 --> 00:07:04.951
また、見出しの中に長い文章や別の見出しを入れ子にしないことも大切です。

81
00:07:04.951 --> 00:07:11.292
見出しは短く保ち、詳しい説明やリンクは、開いたあとの本文に置きましょう。

82
00:07:11.292 --> 00:07:13.432
ブラウザー互換性を確認します。

83
00:07:13.432 --> 00:07:18.497
記事が参照するエムディーエヌの記録では、サマリー本体は、クロームが十二以降、

84
00:07:18.497 --> 00:07:23.561
ファイアフォックスが四十九以降、サファリが六以降で対応しています。

85
00:07:23.561 --> 00:07:28.697
エッジについては、共通エンジンのデータを出典で確認する形になっています。

86
00:07:28.697 --> 00:07:33.976
現在の主要ブラウザーでは広く使える要素ですが、これは要素本体の対応開始の記録であり、

87
00:07:33.976 --> 00:07:39.255
細かなマーカーの見た目まで同じことを保証するものではありません。

88
00:07:39.255 --> 00:07:43.249
実際の表示はスマートフォンでも一度開いて確認しましょう。

89
00:07:43.249 --> 00:07:47.815
マーカーの形や余白はブラウザーごとに少しずつ違う場合があります。

90
00:07:47.815 --> 00:07:54.520
大事な情報がマーカー頼みにならないよう、見出しの文章自体で内容が伝わる書き方を心がけましょう。

91
00:07:54.520 --> 00:07:56.294
最後に練習とまとめです。

92
00:07:56.294 --> 00:08:00.583
サマリーは、ディテールズの最初の子に置く開閉見出しでした。

93
00:08:00.583 --> 00:08:02.505
大切なポイントは三つです。

94
00:08:02.505 --> 00:08:06.645
一つ目は、親のディテールズとセットで、一つだけ置くこと。

95
00:08:06.645 --> 00:08:10.342
二つ目は、開く前に中身が分かる見出し文にすること。

96
00:08:10.342 --> 00:08:15.517
三つ目は、中にリンクやボタンを混ぜず、操作を分かりやすく保つことです。

97
00:08:15.517 --> 00:08:24.833
練習として、よくある質問を二つ考え、質問をサマリー、答えを段落にして、クリックとキーボードの両方で開閉を確認してみてください。

98
00:08:24.833 --> 00:08:26.163
お疲れさまでした。

99
00:08:26.163 --> 00:08:29.269
次回は下付き文字のサブタグを学びましょう。

100
00:08:29.269 --> 00:08:34.000
書いたあとは、閉じた状態で質問だけを読んでみて、答えを開きたくなる見出しになっているか、

101
00:08:34.000 --> 00:08:38.732
自分の目でもう一度確かめてみてください。