操作可能なウィジットを表す<details>タグ、ウィジット内の項目の要約や説明文を表す<summary>タグ、操作メニューを表す<menu>タグ、操作メニューの項目を表す<menuitem>タグの使用方法について掲載
HTML5
対応ブラウザ
カテゴリー・コンテンツモデル
| カテゴリー | コンテンツモデル | |
| details要素 |
|
|
| summary要素 | なし | フレージングコンテンツ |
| menu要素 |
|
|
| 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要素は最初の子要素として最低限１つは必要はです。
基本的な使用方法
<!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実行サンプル
Firefox実行サンプル
edge 実行サンプル
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のとき、そのラジオボタンをグループにまとめます。ラジオボタンは同じグループの中で１つだけ選択可能です。
type
項目のタイプを指定します。指定できる値は以下です。
| command | 通常のメニュー項目を表します。 |
| checkbox | チェックボックスを表します。選択/未選択を切り替えられます。 |
| radio | ラジオボタンを表します。radiogroup属性で定義されたグループの ラジオボタンから１つだけ選択可能です。 |
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実行サンプル
Firefox実行サンプル
edge 実行サンプル
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実行サンプル
Firefox実行サンプル
edge 実行サンプル
opera 実行サンプル
コメント