<details> - 略語 <details> - 略語details は、普段は非表示にされているが、ユーザが詳細表示したいときだけ表示される要素を記述します。通常は、サマリのみが表示され、ブラウザがサポートする何らかの詳細表示ボタンを押した際に詳細情報が表示されます。
この機能をサポートしているブラウザはまだ少ないようです。
| 属性 | 意味 |
|---|---|
| open | H5+。詳細が表示されるべきか否かを指定します。 |
| 属性 | 意味 |
|---|---|
| class=class | H5+。クラスを指定します。 |
| id=id | H5+。IDを指定します。 |
| style=style | H5+。スタイルシートを指定します。 |
| title=title | H5+。タイトルを指定します。 |
| dir=dir | H5+。文字の表示方向を指定します。 |
| lang=lang | H5+。言語を指定します。 |
| accesskey=key | H5+。アクセスキーを指定します。 |
| tabindex=n | H5+。タブインデックスを指定します。 |
| contenteditable=bool | H5+。要素を編集可能にします。 |
| contextmenu=id | H5+。コンテキストメニューを指定します。 |
| draggable=bool | H5+。ドラッグを可能にします。 |
| dropzone=value | H5+。ドロップを可能にします。 |
| hidden | H5+。要素を非表示にします。 |
| spellcheck=bool | H5+。スペルをチェックします。 |
| HTMLソース |
|---|
<details> <summary>検索オプション</summary> <div><label><input type="checkbox" name="ch1">日本語サイトのみ</label></div> <div><label><input type="checkbox" name="ch2">セーフサーチ無効</label></div> </details> |
| ブラウザ表示例 |
|---|
|
▼検索オプション
|