VIDEO LESSON

HTMLのselectedcontentタグとは？属性・使い方・ブラウザー互換性と活用例の解説動画

動画の字幕・文字起こしを読む

再生中の字幕を濃い黒で表示し、一番上に追従します。字幕の行を選ぶと、その位置から再生できます。

0:00こんにちは。
0:00エイチティーエムエル、リファレンス解説です。
0:04HTMLタグ編の二十七本目は、セレクテッドコンテンツタグです。
0:08これはとても新しいタグで、カスタマイズ可能なセレクトの中で、選ばれているオプシヨンの内容を表示するための仕組みです。
0:17従来のセレクトは見た目を大きく変えられませんでしたが、新しい仕組みではボタン部分のデザインを自由にできます。
0:25そのボタンの中に、今選んでいる項目を映し出す役割を担うのが、このタグです。
0:31今回は基本構造、コード例、対応状況と注意点を初心者向けに解説します。
0:36まず前提として、通常のセレクトを思い出しましょう。
0:40セレクトは、都道府県や講座名など、あらかじめ用意された候補の中から一つを選ぶ入力部品です。
0:48中にはオプシヨンを並べ、利用者が選んだ項目の名前が、閉じた状態のボタン部分に表示されます。
0:55今までは、このボタン部分の見た目はブラウザー任せで、色や余白くらいしか変えられませんでした。
1:03アイコン付きの項目や、補足つきの項目をボタン側にもきれいに映したい、という要望に応えるために生まれたのが、
1:10カスタマイズ可能なセレクトと、セレクテッドコンテンツの組み合わせです。
1:18カスタマイズ可能なセレクトとは、セレクトにシーエスエスで、アピアランス、
1:23コロン、ベースセレクト、と指定して切り替える新しいモードです。
1:28このモードでは、セレクトの中にボタン要素を置けるようになり、そのボタンが、
1:32閉じた状態で画面に残る部分になります。
1:36一覧を開いたときの候補の見た目も、シーエスエスで装飾できます。
1:40ただし、これは最近追加された仕組みで、すべてのブラウザーで使えるわけではありません。
1:47対応していない環境では通常のセレクトとして動くよう、最初から確認しながら作ることが大切です。
1:54セレクテッドコンテンツの置き場所は決まっています。
1:58セレクト要素の中に置いたボタン要素、その内側にだけ置きます。
2:02開始タグと終了タグを書き、中身は空にしておくのが基本です。
2:07するとブラウザーが、現在選ばれているオプシヨンの内容を自動で複製して、この場所に表示してくれます。
2:15利用者が別の候補を選び直せば、表示も自動で切り替わります。
2:20自分で表示用の文章を別に書く必要がないのがポイントです。
2:24逆に、ボタンの外や、セレクトの外に単独で置いても、この働きはしません。
2:30記事の活用事例を見てみましょう。
2:32ラベルで、この選択欄が講座を選ぶものだと説明し、セレクトにはカスタムコースというアイディーを付けます。
2:40スタイルでアピアランス、ベースセレクトを指定して、新しいモードに切り替えます。
2:47その中にボタンを置き、ボタンの中に空のセレクテッドコンテンツを入れます。
2:53候補は、エイチティーエムエル入門と、シーエスエス入門の二つのオプシヨンです。
2:59最初はエイチティーエムエル入門が、その名前がボタンに表示され、選び直せば表示も入れ替わります。
3:06構造は、ラベル、ボタン、候補の三層だと捉えると整理できます。
3:11この仕組みの面白い点は、単なる文字だけでなく、選ばれたオプシヨンの中身そのものが複製されることです。
3:19たとえばオプシヨンの中に、小さなアイコンや補足の文字が含まれていれば、それらもボタン側に一緒に映ります。
3:28そのため、候補一覧で見た姿と、選び終わった後のボタンでの姿がそろい、利用者が迷いにくくなります。
3:35複製された内容は表示専用の写しで、元のオプシヨン自体は一覧側に残ります。
3:41だからこそ、オプシヨンの中身は、ボタンに映っても崩れない、簡潔な構成にしておくことが大切です。
3:49属性について確認します。
3:51セレクテッドコンテンツには、この要素専用として覚える必須の属性はありません。
3:57必要に応じて、アイディーやクラス、ラングといった、多くの要素で使える共通属性を利用します。
4:04実際の調整は、このタグ自体よりも、親であるセレクトやボタン、そしてオプシヨン側で行うことが中心です。
4:12たとえば候補を送る値はオプシヨンのバリュー属性で決め、選択欄全体の名前はセレクト側で管理します。
4:20役割分担を間違えて、このタグに候補や値を書こうとしないことが、つまずかないコツです。
4:26見た目の調整はシーエスエスで行います。
4:29ボタン全体の余白や背景色はボタン要素へ、複製された内容の並び方はセレクテッドコンテンツへ指定する、
4:34といった分け方ができます。
4:39画面の例では、フレックスで横並びにし、間隔と縦位置をそろえています。
4:44一覧側を開く部分には、ピッカーという新しい疑似要素も関係してきますが、まずはボタン側が読みやすく整うことを優先しましょう。
4:53長い項目名が選ばれたときに、ボタンからはみ出したり、文字が欠けたりしないか、
4:57実際に候補を切り替えて確認してください。
5:02ブラウザー互換性は特に重要です。
5:04記事が参照する、二千二十六年九月時点のエムディーエヌの記録では、クロームは百三十五以降で対応し、
5:09サファリは二十七以降とされています。
5:13一方、ファイアフォックスは、この要素にはまだ対応していません。
5:18エッジについては共通エンジンのデータを参照する形です。
5:22つまり、今すぐ全員向けの本番サイトで、この見た目だけに頼るのは危険です。
5:27使う場合は、対応ブラウザーでは新しい見た目に、未対応では通常のセレクトで問題なく選べる、
5:31という二段構えで設計してください。
5:36導入前に最新情報の再確認も欠かせません。
5:39注意点をまとめます。
5:40一つ目は置き場所です。
5:42ボタンの外に置くと複製が働かず、ただの空の要素になってしまいます。
5:47二つ目は中身の扱いです。
5:49既存のセレクトと同じ感覚で、子要素を自由に追加しないでください。
5:54表示内容はブラウザーがオプシヨンから複製するものなので、手書きの内容で上書きしようとするものではありません。
6:02三つ目は確認不足です。
6:03アピアランスの指定と、この要素の対応は別々に確認し、通常のセレクトでも同じ候補が選べるかを必ず試しましょう。
6:12キーボードのタブやエンターで操作できるか、三百二十ピクセル幅でも欠けないかも、
6:16あわせて点検してください。
6:20最後に練習とまとめです。
6:21セレクテッドコンテンツは、カスタマイズ可能なセレクトのボタンの中で、選択中のオプシヨンの内容を自動表示するためのタグでした。
6:30大切なポイントは三つです。
6:32一つ目は、セレクトの中のボタンの中に、空で置くこと。
6:36二つ目は、表示はブラウザーが複製するので、自分で中身を書かないこと。
6:41三つ目は、対応状況がまだ限られるため、通常のセレクトとして使える姿も確認することです。
6:47練習として、記事の講座選択の例を対応ブラウザーで開き、候補を切り替えてボタンの表示が変わる様子を確かめてみてください。
6:56お疲れさまでした。
6:57次回もエイチティーエムエルタグの解説を続けましょう。

この動画で学べること

selectedcontentタグの役割と属性を、コード例・活用事例・注意点とともに解説。Chrome・Edge・Firefox・Safariの互換性も確認できます。カスタマイズ可能な select で、選択された option の内容を表示する仕組みです。新しい機能のため対応状況と代替表示を確認します。

解説記事・サンプルコードを読む：HTMLのselectedcontentタグとは？属性・使い方・ブラウザー互換性と活用例 →