HTML辞典 details要素、summary要素、menu要素、menuitem要素、dialog要素の解説

HTML辞典 HTML辞典
この記事は約13分で読めます。

操作可能なウィジットを表す<details>タグ、ウィジット内の項目の要約や説明文を表す<summary>タグ、操作メニューを表す<menu>タグ、操作メニューの項目を表す<menuitem>タグの使用方法について掲載

HTML5

対応ブラウザ

ruby要素,rb要素,rt要素、rp要素、rtc要素 対応ブラウザ:chrome
ruby要素,rb要素,rt要素、rp要素、rtc要素 対応ブラウザ:firefox
ruby要素,rb要素,rt要素、rp要素、rtc要素 対応ブラウザ:safari
ruby要素,rb要素,rt要素、rp要素、rtc要素 対応ブラウザ:ms edge
ruby要素,rb要素,rt要素、rp要素、rtc要素 対応ブラウザ:ms ie
ruby要素,rb要素,rt要素、rp要素、rtc要素 対応ブラウザ:opera

カテゴリー・コンテンツモデル

カテゴリー コンテンツモデル
details要素
  • フローコンテンツ
  • フレージングコンテンツ
  • インタラクティブコンテンツ
  • パルパブルコンテンツ
  • フローコンテンツ
  • 最初の子要素としてsummary要素が1つ必須
summary要素 なし フレージングコンテンツ
menu要素
  • フローコンテンツ
  • インタラクティブコンテンツ
  • パルパブルコンテンツ
  • type属性値がtoolbarの場合はインタラクティブコンテンツ
  • フローコンテンツ
  • type属性値がtoolbarの場合、0個以上のli要素、またはフローコンテンツ
  • type属性値がpopupの場合、0個以上menuitem要素、0個以上のhr要素、0個以上
  • type属性値がpopupの場合、0個以上のスクリプト支援要素
menuitem要素 なし
dialog要素
  • セクショニングルート
  • フローコンテンツ
フローコンテンツ

属性

グローバル属性

グローバル属性は、すべての要素に指定できる共通の属性のことです。

accesskey(アクセスキー)

要素にアクセスキーを割り当てます。いわゆるショートカットキーになります。

autocapitallze

入力/編集されたとき、入力文字列の先頭大文字化が自動的に行われるかどうかなどを指定します

内容
offまたはnone自動的な大文字化は指定しない
onまたはsentences最初の文字を大文字化する
words各語の最初の文字を大文字化する
charactersすべての文字を大文字化する

class(クラス)

要素に分類上の名前を指定します。CSSのセレクタで、特定の要素を選択できるようになります。

contenteditable(コンテント・エディタブル)

要素の内容が閲覧者による編集可能かどうか指定します。

内容
trueまたは、空閲覧者による編集可能。
false閲覧者による編集不可。

data-

カスタムデータ属性、JavaScriptで使用するための独自の属性を指定します。「data-*****=””」のような形式で開発者が自由に指定できます。JavaScriptを利用してデータ処理したり、独自のデータを入力したりするために使用します。

dir(ディレクショナリティ)

要素の内容の書字方向(文字を書き進める方向)を指定します。

内容
ltrテキストを左から右へ書き進める。「Left to Righ」の略
rtl要素は編集不可。「Right to Left」の略
autoユーザーエージェントによって自動的に書字方向を決める

draggable

Drag and Drop APIを使用して要素をドラッグすることができるか指定します。

内容
テキストを左から右へ書き進める。「Left to Righ」の略
autoユーザーエージェントによって自動的に書字方向を決める

hidden(ヒドゥン)

要素がその時点でのページの内容に関連がないことを表し、指定された要素は表示されません。用途としては、ページ内に表示したくないデータの値などをセットしておき、POSTなどで値を送信する場合などに使用したりします。(商品IDやユーザーID)

id(アイディー)

要素にユニークな識別IDを指定します。文章内で一意である必要があり、同じ値を複数のidに設定することはできません。CSSのセレクタで、特定の要素を選択できるようになります。また、リンクのフラグメント識別子としても利用できます。

空白文字は使用できません。

lang(ランゲージ)

要素の内容の言語を指定します。html要素や文書全体に対して指定することができます。また、一部の要素に対しても指定することができます。

例:lang=”ja”

spellcheck(スペルチェック)

要素の内容に対するスペルチェックの可否を指定します。

trueスペルチェックをします。
falseスペルチェックをしません。

style(スタイル)

要素に直接スタイルシートを指定します。

※style属性でスタイルを指定する方法はあまり推奨されていません。

tabindex(タブインデックス)

「TABキー」による移動順序を指定します。正の数値で指定すると、その順序にフォーカスが移動します。負の数値を指定すると選択することができますが、TABキーでの移動順序に含まれません。また、0を指定した要素は最後にフォーカスします。

title(タイトル)

要素に補足情報を加えます

translate(トランスレート)

翻訳対象にするかどうかを指定します。

内容
yes翻訳対象とする
no翻訳非対象とする

イベントハンドラ属性は、JavaScriptのコードを閲覧者の操作に合わせて実行する属性です。

onclick

要素をクリックしたときにスクリプトを実行します。

oninput

入力コントロールにデータを入力したときにスクリプトを実行します。

onsubmit

入力コントロールからデータを送信するときにスクリプトを実行します。

details要素

<details 属性="属性値">~</details>

details要素は、操作可能な開閉式のウィジットを表します。また、detailsを入れ子にすることも可能です。

使用できる属性

open

メニューを初期状態で展開。

<details open="open">~</details>

summary要素

<summary 属性="属性値">~</summary>

details要素の要約や説明文を示す。summary要素は最初の子要素として最低限1つは必要はです。

基本的な使用方法

<!DOCTYPE html>
<html lang="ja">
  <head>
    <title>detailsタグ サンプルページ</title>
    <meta charset="uft-8"><!-- 文字コード指定 -->
  </head>
  <body>
      <details open="open">
         <summary>メニュー</summary>
         <details>
             <summary>Excel学び舎</summary>
	         <ul>
	            <li><a href="/excel/started.html">Excel入門</a></li>
	            <li><a href="/excel/vba.html">Excel VBA</a></li>
	            <li><a href="/excel/method.html">Excel リファレンス</a></li>
	         </ul>
         </details>
         <details>
             <summary>Word学び舎</summary>
	         <ul>
	            <li><a href="/word/started.html">Word入門</a></li>
	            <li><a href="/word/vba.html">Word VBA</a></li>
	            <li><a href="/word/method.html">Word リファレンス</a></li>
	         </ul>
         </details>
      </details>
  </body>
</html>

実行サンプル

chrome実行サンプル

基本的な使用方法サンプル details要素 chrome実行サンプル

Firefox実行サンプル

基本的な使用方法サンプル details要素 firefox実行サンプル

edge 実行サンプル

基本的な使用方法サンプル details要素 edge実行サンプル

opera 実行サンプル

基本的な使用方法サンプル details要素 opera実行サンプル

menu要素

<menu 属性="属性値">~</menu>

menu要素は操作メニューを表します。この要素は実験的な要素であった、2022/05/20時点でもほとんどのブラウザでは対応していません。

使用できる属性

label

メニューにラベルを与えます。

type

メニューのタイプを指定します。

popupポップアップメニューとなります。対応するブラウザーでは画面上に
ポップアップメニューが表示され、閲覧者それを操作できます。
toolbarツールバーとなります。(初期値)
対応するブラウザーでは画面上にツールバーが表示され、
閲覧者がそれを操作できます。

menuitem要素

<menuitem 属性="属性値">~</menuitem>

menuitem要素はmenu要素におけるメニュー項目を表します。この要素は、menu要素に付与されたtype属性の値がpopupの場合のみ、menu要素の子要素として使用できます。

この要素は実験的な要素であった、2022/05/20時点でもほとんどのブラウザでは対応していません。

非推奨 HTML5.2: この機能は非推奨になりました。

使用できる属性

checked(チェックト)

項目を初期状態で選択済みにします。type属性の値がcheckbox、radioの場合のみ有効です。

default

項目が初期値であることを表します。

command

input要素に付与したid属性値を指定することで、この項目が選択された場合にコマンドを実行します。command属性を指定した場合、他の属性を併せて指定することはできません。

disabled

無効にします。

icon

閲覧者に表示する操作メニューのアイコンを、画像ファイルのURLで指定します。

label

閲覧者に表示する操作メニューのラベルを指定します。

radiogroup

type属性の値がradioのとき、そのラジオボタンをグループにまとめます。ラジオボタンは同じグループの中で1つだけ選択可能です。

type

項目のタイプを指定します。指定できる値は以下です。

command通常のメニュー項目を表します。
checkboxチェックボックスを表します。選択/未選択を切り替えられます。
radioラジオボタンを表します。radiogroup属性で定義されたグループの
ラジオボタンから1つだけ選択可能です。

dialog要素

<dialog 属性="属性値">~</dialog>

dialog要素は閲覧者が操作可能なダイアログを表します。

使用できる属性

open

open属性が指定されたdialog要素は初期状態で表示され、閲覧者が操作可能です。指定されていない場合は表示されません。

基本的な使用方法

<!DOCTYPE html>
<html lang="ja">
  <head>
    <title>dialogタグ サンプルページ</title>
    <meta charset="uft-8"><!-- 文字コード指定 -->
  </head>
  <body>
      <p>ダイアログを表示します。</p>
      <dialog open id="dialog">
       <p>ダイアログ内にp要素を表示</p>
      </dialog>
  </body>
</html>

実行サンプル

chrome実行サンプル

基本的な使用方法サンプル dialog要素 chrome実行サンプル

Firefox実行サンプル

基本的な使用方法サンプル dialog要素 firefox実行サンプル

edge 実行サンプル

基本的な使用方法サンプル dialog要素 edge実行サンプル

opera 実行サンプル

基本的な使用方法サンプル dialog要素 opera実行サンプル

ダイアログをモーダル表示

dialog要素をJavaScriptを使用してモーダルで開閉できるようにしているシンプルなコードです。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <title>dialogタグ サンプルページ</title>
    <meta charset="uft-8"><!-- 文字コード指定 -->
  </head>
  <body>
  <dialog id="dialog">
      <form method="dialog">
         <p>
             <label>メッセージを入力してください。</label>
         </p>
         <p>
             <textarea row="50" name="messageStr"></textarea>
         </p>
         <button>キャンセル</button> <button>確認</button>
      </form>
  </dialog>
  <button id="messageWindow">メッセージ送信</button>
  </body>

<script>
var updateButton = document.getElementById('messageWindow');
var favDialog = document.getElementById('dialog');

updateButton.addEventListener('click', function onOpen() {
  if (typeof favDialog.showModal === "function") {
    favDialog.showModal();
  }
});
</script>

</html>

実行サンプル

chrome実行サンプル

基本的な使用方法サンプル dialog要素を使用したモーダルサンプルのchrome実行結果

Firefox実行サンプル

基本的な使用方法サンプル dialog要素を使用したモーダルサンプルのfirefox実行結果

edge 実行サンプル

基本的な使用方法サンプル dialog要素を使用したモーダルサンプルのedge実行結果

opera 実行サンプル

基本的な使用方法サンプル dialog要素を使用したモーダルサンプルのopera実行結果

コメント

タイトルとURLをコピーしました