menuitemタグとは?|ポップアップメニューの項目を表す

menuitemタグとは?|ポップアップメニューの項目を表す
博士
<menu>タグでポップアップメニューを作成する方法が分かったところで、
今回は、<menuitem>タグを使ってメニュー項目を作る方法を解説するぞ。
 
 
博士
博士
リンゴが師と仰ぐ人物。
毎日HTML/CSSデザインの研究をしており、その知識を余すことなくリンゴに教えてくれる。

スポンサーリンク

<menuitem>タグとは

 

<menuitem>

対応ブラウザ
分類
利用場所 menu要素の子要素として(type=”context”の場合に限る)
内容


 
 
<menuitem>タグは、ポップアップメニュー(コンテキストメニュー)の項目を表します。
menuitem要素は、menu要素に付与されたtype属性の値が「context」の場合に限り、menu要素の子要素として使用できます。

2017年1月現在、この機能に対応しているブラウザはまだ存在しないようです。
 
 

type属性

type属性は、メニュー項目の種類を指定します。指定できる値は以下の3つです。

  • command
    通常のメニュー項目(初期値)
  • checkbox
    チェックボックス型(オン/オフを切り替えられるトグルタイプ)
  • radio
    ラジオボタン型(radiogroup属性で指定されたグループのラジオボタンから1つだけを選べるタイプ)

 
 
type属性を省略した場合は、「command」が適用されます。
 
 

スポンサーリンク

label属性

label属性は、メニュー項目のラベルを指定します。
この属性で指定した文字列が、項目名として表示されます。
 
 

icon属性

icon属性は、メニュー項目のアイコンを指定します。
アイコンは、画像ファイルのURLで指定します。
 
 

スポンサーリンク

radiogroup属性

radiogroup属性は、メニュー項目のグループ名を指定します。
この属性は、type属性の値が「radio」のメニュー項目にのみ指定できます。

以下のように複数の項目に同じグループ名を付けることで、1つのグループを作成することができます。

 
 
この場合、「groupA」というグループの3つの項目の中から1つだけ選択可能になります。
 
 

checked属性

checked属性は、最初から選択された状態を指定します。
この属性は、type属性の値が「radio」または「checkbox」のメニュー項目にのみ指定できます。
 
 

スポンサーリンク

disabled属性

disabled属性は、メニュー項目の無効化を指定します。
 
 

default属性

default属性は、初期値となるメニュー項目を指定します。
 
 

スポンサーリンク

title属性

title属性は、メニュー項目のヒント(説明)を指定します。
 
 

使用例

 
 

スポンサーリンク

まとめ

ポップアップメニューの項目を作成する際は、<menuitem>タグを使用します。
 
 

HTML5 タグ図鑑

HTML5タグ全種類を図鑑としてまとめています。タグの意味や使い方でわからないことがあれば、ぜひこのページをご活用ください。

HTML5 タグ図鑑へ

 
HTML5 タグ図鑑

スポンサーリンク








menuitemタグとは?|ポップアップメニューの項目を表す