HTML<optgroup>タグとは?option属性のグループを作成する

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でひと工夫してみる

プログラミング学習に迷ったら相談してみよう!
無料でカウンセリングを受けてみる
※売り込みは一切致しません プログラミングスクール無料カウンセリング