WEBVTT

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

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

3
00:00:03.343 --> 00:00:07.306
エイチティーエムエルタグ編の八十八本目は、ディテールズタグです。

4
00:00:07.306 --> 00:00:12.011
ディテールズは、利用者が自分で開いたり閉じたりできる補足情報を作る要素です。

5
00:00:12.011 --> 00:00:16.717
最初は見出しだけが見えていて、もっと読みたい人が押すと詳しい内容が現れます。

6
00:00:16.717 --> 00:00:20.556
よくある質問の答えや、持ち物の詳しい説明など、最初から全部を見せる必要はないけれど、

7
00:00:20.556 --> 00:00:24.394
必要な人には届けたい情報に向いています。

8
00:00:24.394 --> 00:00:28.171
今回は、サマリーとの組み合わせ、オープン属性、ネーム属性、使い方、互換性、

9
00:00:28.171 --> 00:00:31.948
よくある間違いまで、順番に確認していきましょう。

10
00:00:31.948 --> 00:00:33.607
使う場面を整理します。

11
00:00:33.607 --> 00:00:38.133
ディテールズが向いているのは、よくある質問とその答え、補足の説明、詳しい注意書きなど、

12
00:00:38.133 --> 00:00:42.658
本文の流れでは脇役になる情報です。

13
00:00:42.658 --> 00:00:48.994
長いページでも、見出しだけが並ぶ形にすれば、読み手は目的の項目を探しやすくなります。

14
00:00:48.994 --> 00:00:55.631
しかも、この開閉はブラウザー標準の仕組みなので、ジャバスクリプトを書かなくても動きます。

15
00:00:55.631 --> 00:00:59.553
一方で、記事が注意している通り、重要なエラーや、必ず守るべき必須の手順を、

16
00:00:59.553 --> 00:01:03.475
閉じたまま隠してはいけません。

17
00:01:03.475 --> 00:01:07.548
閉じた情報は、開く操作をしない人には届かないからです。

18
00:01:07.548 --> 00:01:13.280
隠すのではなく、必要なときに開ける形にする、という線引きを意識してください。

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

20
00:01:15.273 --> 00:01:20.637
ディテールズは、開始タグと終了タグを明示して、その中に内容を入れます。

21
00:01:20.637 --> 00:01:24.622
決め手は、最初の子要素としてサマリーを置くことです。

22
00:01:24.622 --> 00:01:28.301
サマリーが、常に表示される開閉見出しになります。

23
00:01:28.301 --> 00:01:35.045
読み手がその見出しをクリックしたり、キーボードで操作したりすると、残りの内容が開きます。

24
00:01:35.045 --> 00:01:39.184
本文はサマリーの後に、段落などの要素で置いてください。

25
00:01:39.184 --> 00:01:43.322
もしサマリーを書き忘れると、ブラウザーが自動で用意した標準の文言が見出しになり、

26
00:01:43.322 --> 00:01:47.460
内容が伝わりにくくなります。

27
00:01:47.460 --> 00:01:52.212
見出しは、何が開くのかが一目で分かる文章にすることが大切です。

28
00:01:52.212 --> 00:01:54.498
記事の活用事例を読み解きます。

29
00:01:54.498 --> 00:01:59.529
例では、サマリーに、持ち物を確認する、と書き、その後に段落で、ノートパソコンと充電器をご用意ください、

30
00:01:59.529 --> 00:02:04.559
と具体的な内容を続けています。

31
00:02:04.559 --> 00:02:11.571
閉じている間は見出しだけが見え、参加者が知りたいときだけ開ける、とても分かりやすい構成です。

32
00:02:11.571 --> 00:02:18.735
試すときは、練習用ファイルのボディの適切な位置にこの例を写し、保存して再読み込みしてください。

33
00:02:18.735 --> 00:02:23.537
そのうえで開発者ツールのエレメンツで、サマリーがディテールズの最初の子になっているか、

34
00:02:23.537 --> 00:02:28.339
入れ子が崩れていないかを確認しましょう。

35
00:02:28.339 --> 00:02:33.064
見出しを押して開閉する動きも、実際に操作して確かめてください。

36
00:02:33.064 --> 00:02:34.879
オープン属性についてです。

37
00:02:34.879 --> 00:02:41.440
オープン属性を付けたディテールズは、ページを開いた直後から、内容が展開した状態で表示されます。

38
00:02:41.440 --> 00:02:49.677
たとえば最初に読んでほしい注意事項や、今まさに募集中の案内など、閉じたままでは見落とされる困る情報に使うと効果的です。

39
00:02:49.677 --> 00:02:55.121
逆に何でもオープンにしてしまうと、折りたたむ意味が薄れてページが長くなります。

40
00:02:55.121 --> 00:03:02.101
基本的には閉じた状態を標準にして、特に目立たせたい一つだけを開く、くらいがちょうどよいバランスです。

41
00:03:02.101 --> 00:03:07.546
また、読み手が手で開閉すると、ブラウザーがこの属性の有無を自動で切り替えます。

42
00:03:07.546 --> 00:03:11.036
状態と見た目が連動している点も覚えておきましょう。

43
00:03:11.036 --> 00:03:13.296
二つの属性の注意点をまとめます。

44
00:03:13.296 --> 00:03:17.675
まず、オープンは真偽属性なので、あるかないかだけで決まります。

45
00:03:17.675 --> 00:03:23.890
オープンイコールフォールスと書いても、属性が存在する以上、開いた状態になってしまいます。

46
00:03:23.890 --> 00:03:28.834
閉じたいときは値を変えるのではなく、属性そのものを取り除いてください。

47
00:03:28.834 --> 00:03:30.247
次にネーム属性です。

48
00:03:30.247 --> 00:03:34.061
複数のディテールズに同じネームを付けると、一つを開いたときに他のものが自動で閉じる、

49
00:03:34.061 --> 00:03:37.875
排他的な開閉になります。

50
00:03:37.875 --> 00:03:42.889
よくある質問を並べるアコーディオンに便利ですが、これは比較的新しい機能なので、

51
00:03:42.889 --> 00:03:47.904
後で述べるように、本体とは別に対応状況を確認する必要があります。

52
00:03:47.904 --> 00:03:51.832
シーエスエスで見た目を整える方法を確認します。

53
00:03:51.832 --> 00:03:59.176
ディテールズに枠線や余白を付けると、補足情報のまとまりが視覚的に分かりやすくなります。

54
00:03:59.176 --> 00:04:05.666
サマリーにはカーソルをポインターにして、押せる場所だと伝える工夫も有効です。

55
00:04:05.666 --> 00:04:09.423
状態の判別には、属性セレクターが役立ちます。

56
00:04:09.423 --> 00:04:13.864
オープン属性があるときだけ効く指定を書けば、開いたときの見出しを太字にする、

57
00:04:13.864 --> 00:04:18.304
といった切り替えができます。

58
00:04:18.304 --> 00:04:24.026
左端の三角のマーカーもシーエスエスで大きさや色を調整できますが、開閉できる印そのものを消してしまうと、

59
00:04:24.026 --> 00:04:29.747
操作できると分からなくなります。

60
00:04:29.747 --> 00:04:34.529
装飾は、意味と操作性を損なわない範囲にとどめてください。

61
00:04:34.529 --> 00:04:37.956
共通属性と、似た要素との違いを確認します。

62
00:04:37.956 --> 00:04:44.646
ディテールズにも、アイディーやクラス、ラング、データ属性などの共通属性が使えます。

63
00:04:44.646 --> 00:04:52.642
アイディーを付けておけば、よくある質問の特定の項目へ、ページ内リンクで直接案内することもできます。

64
00:04:52.642 --> 00:04:55.742
注意したいのはダイアログとの違いです。

65
00:04:55.742 --> 00:05:05.533
ダイアログにもオープン属性があり、開いた状態を示す点は似ていますが、ダイアログのモーダル表示とは仕組みがまったく別です。

66
00:05:05.533 --> 00:05:12.060
同じ名前の属性でも、要素ごとに意味を持ち込まない、というのが記事の示す原則です。

67
00:05:12.060 --> 00:05:18.261
ディテールズのオープンは、あくまで折りたたみの開閉状態だと理解してください。

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

69
00:05:20.265 --> 00:05:25.342
記事が紹介するエムディーエヌのデータでは、ディテールズ要素本体は、クロームが十二以降、

70
00:05:25.342 --> 00:05:30.419
サファリが六以降、ファイアフォックスが四十九以降で対応しています。

71
00:05:30.419 --> 00:05:33.625
エッジは共通エンジンのデータを参照する扱いです。

72
00:05:33.625 --> 00:05:38.435
ファイアフォックスには補足条件があるため、細部は出典で確認してください。

73
00:05:38.435 --> 00:05:42.175
本体もオープン属性も古くから使えて、安心できる部類です。

74
00:05:42.175 --> 00:05:46.250
対照的に、ネーム属性は、クロームが百二十以降、ファイアフォックスが百三十以降、

75
00:05:46.250 --> 00:05:50.325
サファリが十七・二以降という新しい対応です。

76
00:05:50.325 --> 00:05:57.673
ネームを使う場合は、古いブラウザーでは排他開閉だけが効かず、内容自体は読める形になっているかを確認しましょう。

77
00:05:57.673 --> 00:05:59.832
よくある間違いを三つ挙げます。

78
00:05:59.832 --> 00:06:02.997
一つ目は、大切な情報を隠してしまうことです。

79
00:06:02.997 --> 00:06:08.466
必須の手順や重要な警告まで折りたたむと、開かなかった人にまったく届きません。

80
00:06:08.466 --> 00:06:13.646
二つ目は、サマリーを省いたり、最初の子以外の場所に置いたりすることです。

81
00:06:13.646 --> 00:06:18.395
その場合、標準の文言が見出しになり、中身の想像がつかなくなります。

82
00:06:18.395 --> 00:06:23.144
見出しは、質問そのものや、内容を要約した具体的な文にしてください。

83
00:06:23.144 --> 00:06:27.893
三つ目は、オープンイコールフォールスで閉じたつもりになることです。

84
00:06:27.893 --> 00:06:33.073
真偽属性は値ではなく有無で決まるので、これは開いた状態の指定になります。

85
00:06:33.073 --> 00:06:40.700
さらに、スマホの三百二十ピクセル程度の幅や文字拡大でも、見出しと本文が欠けないかを合わせて確認しましょう。

86
00:06:40.700 --> 00:06:41.558
まとめです。

87
00:06:41.558 --> 00:06:47.564
ディテールズは、利用者が開閉できる補足情報を、ジャバスクリプトなしで作れる要素です。

88
00:06:47.564 --> 00:06:50.281
最後にチェックリストで確認しましょう。

89
00:06:50.281 --> 00:06:55.000
まず、折りたたむのが本当に補足情報で、必須の内容を隠していないか。

90
00:06:55.000 --> 00:07:00.005
次に、サマリーが最初の子にあり、開く内容が分かる見出しになっているか。

91
00:07:00.005 --> 00:07:07.299
そして、オープンは初期状態の指定として正しく使い、ネームのような新しい属性は対応状況を別に確認したか。

92
00:07:07.299 --> 00:07:12.876
さらに、タブ、エンター、スペースなどの標準操作で開閉できるかも試してください。

93
00:07:12.876 --> 00:07:18.024
この条件がそろえば、ページはすっきりし、必要な情報は必要な人に届きます。

94
00:07:18.024 --> 00:07:21.885
ぜひ、よくある質問のページなどで活用してみてください。

95
00:07:21.885 --> 00:07:24.888
これでディテールズタグの解説を終わります。