selelctタグやdatalistタグで選択肢を作成するのに使用するoptionタグ。そんな選択肢の中で、グループを作成できるのをご存じですか？
選択肢をグループ化する方法とは？
今回は、optgroupタグの
・基本的な使い方
・選択肢を選択させない方法
・CSSを使用したoptgroupの装飾方法
について説明します。
目次
optgroupタグとは
optgroupタグの読み方
optgroupタグは「オプショングループタグ」と読みます。
optgroupタグの説明
optgroupは”option group”を略した用語で、選択肢を作成するoption内の値をまとめるのに使用します。選択肢をグループ化することで、セレクトボックスを複数作成する必要もなくなります。
optgroupタグで利用できる属性
optgroupタグではグローバル属性と以下の属性を使うことができます。
| グローバル属性 | 説明 |
|---|---|
| accesskey | 要素に体するショートカットキーを指定するための属性です。 |
| autocapitalize | ブラウザでユーザーが要素に入力や編集をした際、入力欄で入力した文字列の最初の文字が自動的に大文字化されるかどうかを設定する属性です。 |
| class | 要素にCSSでスタイル（見た目）を適用するためによく使われる属性です |
| contenteditable | 要素の内容を編集可能かどうかを指定する属性です。 |
| data-* | 要素にオリジナルのデータ属性を指定するための属性です。 |
| dir | テキストの文字の方向を右書き・左書きのどちらかに指定する属性です。 |
| draggable | 要素がドラッグ可能かどうかを指定する属性です。 |
| dropzone | 要素の上でコンテンツをドロップできるかどうかを指定する属性です。 |
| hidden | 要素の非表示を指定する属性です。 |
| id | class属性同様、要素にCSSでスタイルを適用するためによく使われます。同じid属性はページ内で1回しか使えません。 |
| inputmode | 仮想キーボードの種類の構成に関するヒントを与えます。 |
| is | 登録したカスタム内臓要素のように振舞うように指定できます。 |
| itemid | 項目で一意なグローバル識別子です。 |
| itemprop | その要素で記述された内容がどのような意味を持つかを定義する属性です。 |
| itemref | 項目に関連付けることができます。 |
| itemscope | itemtypeとセットで使用する属性です。ブロックに含まれているHTMLが特定の項目に関するということを指定します。 |
| itemtype | アイテムの種類を指定するための属性です。 |
| lang | 要素の中で使われる言語を定義する属性です。 |
| part | CSSの疑似要素::partを使用するためにパート名を付けます。 |
| slot | 要素にシャドウツリーのスロットを割り当てるための属性です。 |
| spellcheck | 要素のスペルチェックを有効にするかどうかを指定する属性です。 |
| style | 要素に直接スタイル（見た目）を指定するための属性です。 |
| tabindex | Tabキーを使って要素を選択する際の優先順位を指定する属性です。 |
| title | 要素のタイトルを定義します。パソコンのブラウザでは、要素部分にマウスを当てると定義したタイトルが表示されます。 |
| それ以外の属性 | 説明 |
| disabled | ユーザーによる操作を無効にするかどうかを指定する属性です。 |
| label | ユーザーが読める形で表示するタイトルを指定する属性です。 |
対応ブラウザ
対応ブラウザは以下の通りです。
| PC用ブラウザ | 対応状況 |
|---|---|
| Chrome | 1 |
| Edge | 12 |
| Firefox | 1 |
| nternet Explorer | 5.5 |
| Opera | 完全対応 |
| Safari | 完全対応 |
| スマートフォン用ブラウザ | 対応状況 |
| Android webview | 完全対応 |
| Android版Chrome | 完全対応 |
| Android版Firefox | 4 |
| Android 版 Opera | 完全対応 |
| iOS版Safari | 完全対応 |
| Samsung Internet | 完全対応 |
optgroupタグの基本的な使い方
optgroupタグの使い方
optgroupタグはoptionタグを囲うようにして使用します。optionタグはフォーム内のタグなので、まずはセレクトボックスをformタグで囲います。その中にselectタグを設置。
labelタグには設置するセレクトボックスの説明を記載します。labelタグを閉じたらセレクトボックスを配置し、<select></select>の中にはoptionタグで選択肢の候補をひとつずつ記入していきます。
そこで登場するのがoptgroupタグ。optgroupタグで選択肢をグループ化し、より選択しやすくしています。optgroupタグ内のlabel属性ではグループ名を付けます。設定したグループ名が太文字になって表示されていますね！
See the Pen
abZgpwb by rabbittyu (@rabbittyu)
on CodePen.
ではoptgroupタグを応用的に使用できるよう、少し手を加えてみましょう。
optgroup内の要素を選択させない方法
選択済みの候補リストを作成します。作り方は簡単！optgroupのlabel名の後に”disabled”を書くだけ！選択できないように変更されました。
この設定を行う際は、なぜ選択できないのかをユーザ向けに説明を加えておくのが良いでしょう。
See the Pen
optgroup選択済み by rabbittyu (@rabbittyu)
on CodePen.
CSSを使ってopgroupタグを装飾する方法
基本の使い方で紹介したフォームを、CSSを使って装飾してみましょう。選択肢をグループごとに色分けし、さらに見やすくなるように設定しました。
CSSを適用するためには、optgroupのlabel属性に続いて、class属性を指定してください。CSSでは「optgroup.クラス名」でこの要素にアクセスできます。
背景色を指定するbackgroundで色を指定し、色を付けています。色コードは色コード一覧表を使用すると便利です。
See the Pen
optgroup CSS by rabbittyu (@rabbittyu)
on CodePen.
まとめ
今回はセレクトボックスの選択肢をグループ化するoptgroupタグについて説明しました。
- optgroupタグはoptionタグを囲って、選択肢をグループ化する
- optgroupタグはlabel属性と一緒に使用し、label属性にグループ名を書く
以上2点さえ覚えておけばoptgroupタグの使い方は完璧！optgroupタグを上手く利用して、より柔軟なフォームを作成してみてくださいね。
参考文献：
HTML5タグリファレンス
MDN web docks <optgroup>
これだけは覚えておきたい！【前編：HTML（タグ）の読み方】
optgroup要素をCSSでひと工夫してみる
