WEBVTT

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

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

3
00:00:04.196 --> 00:00:08.842
HTMLタグ編の二十七本目は、セレクテッドコンテンツタグです。

4
00:00:08.842 --> 00:00:17.535
これはとても新しいタグで、カスタマイズ可能なセレクトの中で、選ばれているオプシヨンの内容を表示するための仕組みです。

5
00:00:17.535 --> 00:00:25.627
従来のセレクトは見た目を大きく変えられませんでしたが、新しい仕組みではボタン部分のデザインを自由にできます。

6
00:00:25.627 --> 00:00:31.172
そのボタンの中に、今選んでいる項目を映し出す役割を担うのが、このタグです。

7
00:00:31.172 --> 00:00:36.268
今回は基本構造、コード例、対応状況と注意点を初心者向けに解説します。

8
00:00:36.268 --> 00:00:40.466
まず前提として、通常のセレクトを思い出しましょう。

9
00:00:40.466 --> 00:00:48.022
セレクトは、都道府県や講座名など、あらかじめ用意された候補の中から一つを選ぶ入力部品です。

10
00:00:48.022 --> 00:00:55.579
中にはオプシヨンを並べ、利用者が選んだ項目の名前が、閉じた状態のボタン部分に表示されます。

11
00:00:55.579 --> 00:01:03.303
今までは、このボタン部分の見た目はブラウザー任せで、色や余白くらいしか変えられませんでした。

12
00:01:03.303 --> 00:01:10.692
アイコン付きの項目や、補足つきの項目をボタン側にもきれいに映したい、という要望に応えるために生まれたのが、

13
00:01:10.692 --> 00:01:18.080
カスタマイズ可能なセレクトと、セレクテッドコンテンツの組み合わせです。

14
00:01:18.080 --> 00:01:23.061
カスタマイズ可能なセレクトとは、セレクトにシーエスエスで、アピアランス、

15
00:01:23.061 --> 00:01:28.041
コロン、ベースセレクト、と指定して切り替える新しいモードです。

16
00:01:28.041 --> 00:01:32.204
このモードでは、セレクトの中にボタン要素を置けるようになり、そのボタンが、

17
00:01:32.204 --> 00:01:36.367
閉じた状態で画面に残る部分になります。

18
00:01:36.367 --> 00:01:40.976
一覧を開いたときの候補の見た目も、シーエスエスで装飾できます。

19
00:01:40.976 --> 00:01:47.221
ただし、これは最近追加された仕組みで、すべてのブラウザーで使えるわけではありません。

20
00:01:47.221 --> 00:01:54.060
対応していない環境では通常のセレクトとして動くよう、最初から確認しながら作ることが大切です。

21
00:01:54.060 --> 00:01:58.066
セレクテッドコンテンツの置き場所は決まっています。

22
00:01:58.066 --> 00:02:02.873
セレクト要素の中に置いたボタン要素、その内側にだけ置きます。

23
00:02:02.873 --> 00:02:07.519
開始タグと終了タグを書き、中身は空にしておくのが基本です。

24
00:02:07.519 --> 00:02:15.371
するとブラウザーが、現在選ばれているオプシヨンの内容を自動で複製して、この場所に表示してくれます。

25
00:02:15.371 --> 00:02:20.017
利用者が別の候補を選び直せば、表示も自動で切り替わります。

26
00:02:20.017 --> 00:02:24.504
自分で表示用の文章を別に書く必要がないのがポイントです。

27
00:02:24.504 --> 00:02:30.112
逆に、ボタンの外や、セレクトの外に単独で置いても、この働きはしません。

28
00:02:30.112 --> 00:02:32.699
記事の活用事例を見てみましょう。

29
00:02:32.699 --> 00:02:40.944
ラベルで、この選択欄が講座を選ぶものだと説明し、セレクトにはカスタムコースというアイディーを付けます。

30
00:02:40.944 --> 00:02:47.249
スタイルでアピアランス、ベースセレクトを指定して、新しいモードに切り替えます。

31
00:02:47.249 --> 00:02:53.068
その中にボタンを置き、ボタンの中に空のセレクテッドコンテンツを入れます。

32
00:02:53.068 --> 00:02:59.212
候補は、エイチティーエムエル入門と、シーエスエス入門の二つのオプシヨンです。

33
00:02:59.212 --> 00:03:06.810
最初はエイチティーエムエル入門が、その名前がボタンに表示され、選び直せば表示も入れ替わります。

34
00:03:06.810 --> 00:03:11.660
構造は、ラベル、ボタン、候補の三層だと捉えると整理できます。

35
00:03:11.660 --> 00:03:19.690
この仕組みの面白い点は、単なる文字だけでなく、選ばれたオプシヨンの中身そのものが複製されることです。

36
00:03:19.690 --> 00:03:28.041
たとえばオプシヨンの中に、小さなアイコンや補足の文字が含まれていれば、それらもボタン側に一緒に映ります。

37
00:03:28.041 --> 00:03:35.750
そのため、候補一覧で見た姿と、選び終わった後のボタンでの姿がそろい、利用者が迷いにくくなります。

38
00:03:35.750 --> 00:03:41.532
複製された内容は表示専用の写しで、元のオプシヨン自体は一覧側に残ります。

39
00:03:41.532 --> 00:03:49.080
だからこそ、オプシヨンの中身は、ボタンに映っても崩れない、簡潔な構成にしておくことが大切です。

40
00:03:49.080 --> 00:03:51.009
属性について確認します。

41
00:03:51.009 --> 00:03:57.118
セレクテッドコンテンツには、この要素専用として覚える必須の属性はありません。

42
00:03:57.118 --> 00:04:04.353
必要に応じて、アイディーやクラス、ラングといった、多くの要素で使える共通属性を利用します。

43
00:04:04.353 --> 00:04:12.391
実際の調整は、このタグ自体よりも、親であるセレクトやボタン、そしてオプシヨン側で行うことが中心です。

44
00:04:12.391 --> 00:04:20.108
たとえば候補を送る値はオプシヨンのバリュー属性で決め、選択欄全体の名前はセレクト側で管理します。

45
00:04:20.108 --> 00:04:26.860
役割分担を間違えて、このタグに候補や値を書こうとしないことが、つまずかないコツです。

46
00:04:26.860 --> 00:04:29.717
見た目の調整はシーエスエスで行います。

47
00:04:29.717 --> 00:04:34.379
ボタン全体の余白や背景色はボタン要素へ、複製された内容の並び方はセレクテッドコンテンツへ指定する、

48
00:04:34.379 --> 00:04:39.040
といった分け方ができます。

49
00:04:39.040 --> 00:04:44.153
画面の例では、フレックスで横並びにし、間隔と縦位置をそろえています。

50
00:04:44.153 --> 00:04:53.326
一覧側を開く部分には、ピッカーという新しい疑似要素も関係してきますが、まずはボタン側が読みやすく整うことを優先しましょう。

51
00:04:53.326 --> 00:04:57.687
長い項目名が選ばれたときに、ボタンからはみ出したり、文字が欠けたりしないか、

52
00:04:57.687 --> 00:05:02.048
実際に候補を切り替えて確認してください。

53
00:05:02.048 --> 00:05:04.352
ブラウザー互換性は特に重要です。

54
00:05:04.352 --> 00:05:09.105
記事が参照する、二千二十六年九月時点のエムディーエヌの記録では、クロームは百三十五以降で対応し、

55
00:05:09.105 --> 00:05:13.857
サファリは二十七以降とされています。

56
00:05:13.857 --> 00:05:18.322
一方、ファイアフォックスは、この要素にはまだ対応していません。

57
00:05:18.322 --> 00:05:22.210
エッジについては共通エンジンのデータを参照する形です。

58
00:05:22.210 --> 00:05:27.395
つまり、今すぐ全員向けの本番サイトで、この見た目だけに頼るのは危険です。

59
00:05:27.395 --> 00:05:31.787
使う場合は、対応ブラウザーでは新しい見た目に、未対応では通常のセレクトで問題なく選べる、

60
00:05:31.787 --> 00:05:36.180
という二段構えで設計してください。

61
00:05:36.180 --> 00:05:39.060
導入前に最新情報の再確認も欠かせません。

62
00:05:39.060 --> 00:05:40.587
注意点をまとめます。

63
00:05:40.587 --> 00:05:42.266
一つ目は置き場所です。

64
00:05:42.266 --> 00:05:47.304
ボタンの外に置くと複製が働かず、ただの空の要素になってしまいます。

65
00:05:47.304 --> 00:05:49.136
二つ目は中身の扱いです。

66
00:05:49.136 --> 00:05:54.022
既存のセレクトと同じ感覚で、子要素を自由に追加しないでください。

67
00:05:54.022 --> 00:06:02.266
表示内容はブラウザーがオプシヨンから複製するものなので、手書きの内容で上書きしようとするものではありません。

68
00:06:02.266 --> 00:06:03.945
三つ目は確認不足です。

69
00:06:03.945 --> 00:06:12.189
アピアランスの指定と、この要素の対応は別々に確認し、通常のセレクトでも同じ候補が選べるかを必ず試しましょう。

70
00:06:12.189 --> 00:06:16.159
キーボードのタブやエンターで操作できるか、三百二十ピクセル幅でも欠けないかも、

71
00:06:16.159 --> 00:06:20.128
あわせて点検してください。

72
00:06:20.128 --> 00:06:21.887
最後に練習とまとめです。

73
00:06:21.887 --> 00:06:30.973
セレクテッドコンテンツは、カスタマイズ可能なセレクトのボタンの中で、選択中のオプシヨンの内容を自動表示するためのタグでした。

74
00:06:30.973 --> 00:06:32.878
大切なポイントは三つです。

75
00:06:32.878 --> 00:06:36.688
一つ目は、セレクトの中のボタンの中に、空で置くこと。

76
00:06:36.688 --> 00:06:41.671
二つ目は、表示はブラウザーが複製するので、自分で中身を書かないこと。

77
00:06:41.671 --> 00:06:47.972
三つ目は、対応状況がまだ限られるため、通常のセレクトとして使える姿も確認することです。

78
00:06:47.972 --> 00:06:56.619
練習として、記事の講座選択の例を対応ブラウザーで開き、候補を切り替えてボタンの表示が変わる様子を確かめてみてください。

79
00:06:56.619 --> 00:06:57.938
お疲れさまでした。

80
00:06:57.938 --> 00:07:01.748
次回もエイチティーエムエルタグの解説を続けましょう。