contextmenu=""

ブラウザ
  • Fx

contextmenu属性は、その要素をどのコンテキストメニュー（menu要素）に関連付けるかを指定します。

  • この属性を使用する場合は、menu要素でコンテキストメニュー（ポップアップメニュー）を作成しておく必要があります。
  • この属性はHTML 5.1で追加されました。

<p contextmenu="example">コンテキストメニューを表示させる要素</p>

<menu type="context" id="example">
...
</menu>
属性 値
グローバル属性
contextmenu="" コンテキストメニューとの関連付け ID名 関連付けるmenu要素に指定したID名

contextmenu属性の値には、関連付けるmenu要素に指定したID名を記述します。

次の例では、exampleというID名によって、p要素とmenu要素とを関連付けています。

<p contextmenu="example">サンプルテキスト</p>

<menu type="context" id="example">
...
</menu>

上記の場合、p要素の上で右クリック（Windowsの場合）すると、menu要素で設定したコンテキストメニューが表示されるようになります。（対応しているブラウザのみ）

指定できる要素

contextmenu属性はグローバル属性のため、HTML5の全ての要素に指定することができます。

使用例

p要素とコンテキストメニュー（ポップアップメニュー）を関連付けた例

<p contextmenu="example">コンテキストメニュー</p>

<menu type="context" id="example">
<menuitem label="メニュー項目A" onclick="alert('メニュー項目Aのアラート');">
<menuitem label="メニュー項目B" onclick="alert('メニュー項目Bのアラート');">
<menuitem label="メニュー項目C" onclick="alert('メニュー項目Cのアラート');">
</menu>
表示例

コンテキストメニュー

  • 対応しているブラウザでは、テキストの上で右クリック（Windowsの場合）すると上記のメニューが表示されます。
  • Firefox（50）はcontextmenu属性に対応しています。しかし、menuitem要素への対応が不完全なため、上記のサンプルでは1つ目のメニュー項目しか表示されません。