【HTML5プロフェッショナル認定試験レベル1】試験勉強まとめ（その他の要素）

HTML5プロフェッショナル認定試験レベル1の試験勉強まとめ（その他の要素）です。

figure要素/figurecaption要素

figure要素は図版コンテンツを示す。figurecaption要素はそのキャプションや説明。figurecaption要素はfigure要素内であればどこに配置してもOK。

利用例）

<figure id="test">
    <figcaption>サンプルコード</figcaption>
    <pre><code>
var a = 4;
var b = 3;
var c = a + b;
    </code></pre>
</figure>

出力結果）

サンプルコード

var a = 4;
var b = 3;
var c = a + b;
    

details要素/summary要素

details要素は、開閉可能な隠しウィジット（ディスクロージャーウィジット）。summary要素は、details要素に常に表示されている見出し。

details要素に指定できる属性

属性	用途	補足説明
open	ウィジットを開いた状態にする	論理属性

利用例）

<details open>
    <summary>ディスクロージャーウィジット</summary>
    <img src="https://cdn-ak.f.st-hatena.com/images/fotolife/n/nachumo/20200913/20200913144059.png" alt="takano">
</details>

出力結果）

ディスクロージャーウィジット

menu要素/menuitem要素

menu要素はコンテキストメニューを表示する。menuitem要素はその項目。

menu要素に指定できる属性

属性	用途	補足説明
type	メニューの種類	type="context"のみ
label	階層メニューの項目名

menuitem要素に指定できる属性

属性	用途	補足説明
type	メニュー項目の種類	type="command" または type="checkbox" または type="radio"
label	メニュー項目として表示されるテキスト
icon	メニュー項目に表示させるアイコン	URL
radiogroup	連動して動作させる項目につける共通の名前	※type="radio"の場合
default	デフォルトで選択状態にする	論理属性
checked	メニュー項目を選択状態にする	論理属性
disabled	メニュー項目を無効にする	論理属性

利用例）

<img src="https://cdn-ak.f.st-hatena.com/images/fotolife/n/nachumo/20200913/20200913144059.png" alt="takano" width="200" height="200" contextmenu="context-menu">
<menu id="context-menu">
    <menuitem label="項目1" type="radio" default>
    <menuitem label="項目2" type="radio" >
    <menuitem label="項目3" type="radio" disabled>
    <menu label="サブメニュー"> 
        <menuitem label="サブメニューの項目1" onclick="---">
        <menuitem label="サブメニューの項目2" onclick="---">
    </menu>
</menu>

出力結果）firefoxじゃないと見れないかも。

iframe要素

HTML文書の中で別の文書を表示させる領域＝ブラウジングコンテキスト。

iframe要素に指定できる属性

属性	用途	補足説明
src	表示させる文書のアドレス	URL
srcdoc	インラインフレーム内に表示させるHTML文書データ	ソースコード
name	ブラウジングコンテキストの名前	ブラウジングコンテキスト名またはキーワード
allowfullscreen	フルスクリーン表示を許可	論理属性
sandbox	この属性を指定していることによるセキュリティ上の制限のうち、解除する項目をキーワードで指定	※下記参照
width	幅
height	高さ

sandbox属性に指定できるキーワード：

• allow-formes
• allow-pointer-lock
• allow-popups
• allow-same-origin
• allow-scripts
• allow-top-navigation

hr要素

段落レベルの区切り目。

利用例）

<hr>

出力結果）

---

script要素

script要素は外部スクリプトまたはデータブロックを組み込むための要素。

script要素に指定できる属性

属性	用途	補足説明
src	外部スクリプトのアドレス	URL データブロックの場合は使用できない
type	外部スクリプトまたはデータブロックの種類	MIMEタイプ データブロックの場合は必須 省略時のデフォルト値は text/javascript
charaset	外部スクリプトの文字コード
async	外部スクリプトを非同期で読み込ませ、読み込み完了後すぐに実行させる	論理属性
defer	外部スクリプトを非同期で読み込ませ、ページ全体の解析処理が完了してから実行させる	論理属性
crossorigin	元文書とは異なるオリジンからデータを取得する場合の認証設定	crossorigin="anonymous" または "use-credentials"
nonce	CSP（セキュリティ対策の仕様）のノンス

noscript要素

noscript要素はスクリプトが無効の場合に利用されるコンテンツを要素内容として持つ要素。

• スクリプトが有効な場合は利用されない
• head要素内にある時は要素内容にlink要素、style要素、meta要素を入れられる
• head要素以外にある時はトランスピアレントになる

template要素

スクリプトによって生成される部分であることを示す要素。次コンテンツまたは要素を自動生成できる。要素を自動生成する場合は、template要素タグで囲う。

• table要素
• tr要素 / thead要素 / tbody要素 / tfoot要素
• colgroup要素
• ul要素 / ol要素 / dl要素
• ruby要素
• video要素 / audio要素
• object要素
• figure要素
• select要素
• fieldset要素
• details要素
• menu要素
• フローコンテンツ
• メタデータコンテンツ

canvas要素

スクリプトによって描画するビットマップの動的なグラフィック。

canvas要素に指定できる属性

属性	用途	補足説明
width	幅	デフォルト値あり（300）
height	高さ	デフォルト値あり（150）