その他要素 | HTML5プロフェッショナル認定試験レベル1(ver.2.0)試験対策

  • 2021年1月12日
  • 2021年6月18日
  • 資格

HTML5プロフェッショナル認定試験レベル1(ver.2.0)」の試験対策の備忘録。

今回は、試験範囲でもある「その他要素」のまとめ。

ちなみに、2014年10月28日にW3Cによって「HTML5」が勧告され、2016年11月1日には「HTML5.1」へ、そして2017年12月14日には「HTML5.2」が勧告されました。2019年5月になって、W3CとWHATWGは“HTML Living standard”をHTML技術仕様の唯一の標準規格とすると合意しました。これにより現在は、WHATWGによって策定された「HTML Living standard」が「HTML5/5.1/5.2」に代わるHTML技術仕様の標準規格となっているが、2021年04月現在「HTML5プロフェッショナル認定試験レベル1(ver.2.0)」の試験範囲のHTMLのバージョンは「HTML5.1(※5.0については、5.1で非奨励になったものも一部出題される可能性がある)」だそうなので、「HTML5.1」をもとに書いています。

figure要素

「figure」とは、「図・図表・挿絵」などの意味。figure要素は、それがメインコンテンツの本文から参照される図版のようなコンテンツであることを示す要素

具体的な要素内容としては、図表・写真・イラスト・ソースコードの一部のような、それ自身がまとまったひとつの完結した内容となっているフローコンテンツを入れる。

figure要素の図版にキャプションをつけるには、figcaption要素を使用する。

figcaption要素

figcaption要素は、figure要素で示す図版のキャプションや説明文部分をマークアップするための専用要素

figcaption要素は、HTML5.0ではfigure要素の一番前または一番後ろのいずれかにしか配置できなかったが、HTML5.1からはfigure要素内であればどこにでも配置できるように変更されている

details要素

details要素は、詳細情報を表示させる領域の開く・閉じる(折りたたみと展開)を切り替えられるディスクロージャーウィジットになる要素。

要素内容の先頭summary要素を入れておくと、開く・閉じるの状態にかかわらず常に表示される見出しとなる

details要素open属性を指定すると最初から開かれている状態で表示される。ユーザーが開く・閉じるを切り替えると、ブラウザが自動的にこの属性の追加と削除を行う。

属性名
open 論理属性(属性名だけで指定可)
<details>
  <summary>見出し</summary>
  <p>詳細情報</p>
  <p>詳細情報</p>
  <p>詳細情報</p>
  <p>詳細情報</p>
</details>

summary要素

summary要素は、ディスクロージャーウィジットにおいて、開く・閉じるの状態にかかわらず常に表示されている見出し(内容を短く言い表したもの/キャプション)となる要素。

要素内容にはフレージングコンテンツまたはh1~h6要素のうちの1つを入れることができる。

figure要素内のfigcaption要素は要素内のどこにでも配置できるが、summary要素details要素内の先頭にしか配置できない

menu要素

menu要素は、その内容がコンテキストメニューとなって表示される要素。コンテキストメニューを表示させたい要素にグローバル属性contextmenu属性を指定して、その値にmenu要素id属性の値を指定すると、右クリックでコンテキストメニューが表示されるようになる。

メニュー内の各メニュー項目はmenuitem要素で指定する。階層メニューにするためには、menu要素を入れ子にする。入れ子にした際の項目名(ラベル)はlabel属性で指定する。メニュー項目を区切るにはhr要素を使用する。

属性名
type メニューの種類
type=”context”
label 階層メニューの項目名
値には、テキスト

HTML5.1の完成前の仕様では、menu要素type属性には「context」と「toolbar」という2つのキーワードが指定できるようになっていた。しかし最終的には「context」しか指定できないことになったため、結果としてHTML5.1のmenu要素=コンテキストメニューとなっている

menuitem要素

menuitem要素は、menu要素で作成するコンテキストメニュー内のメニュー項目となる空要素

type属性には3種類のキーワードが指定できる。
「command」…命令を実行させる。
「checkbox」…チェック可能な項目。
「radio」…複数の中から1つだけ選択できる項目。

属性名
type メニュー項目の種類
type=”command”
type=”checkbox”
type=”radio”
label メニュー項目として表示させるテキスト
値には、テキスト
default メニューが使用されなかった場合に、デフォルトで選択された状態にする項目にする
論理属性(属性名だけで指定可)
icon メニュー項目に表示させるアイコン
値は、URL
radiogroup type=”radio”にして連動して動作させる項目に付ける共通の名前
値は、テキスト
checked メニュー項目を選択済みの状態にする
論理属性(属性名だけで指定可)
disabled メニュー項目を無効にする
論理属性(属性名だけで指定可)

iframe要素

iframe要素は、HTML文書の中で別の文書を表示させる領域(ブラウジングコンテキスト)となる要素。

「iframe」は、「inline frame(インライン・フレーム)」の略。

iframe要素に指定できる属性
属性名
src 表示させる文書のアドレス
値:URL(空文字は不可)
srcdoc インラインフレーム内に表示させるHTML文書データ
値:HTML文書のソースコード全体src属性srcdoc属性の両方を同時に指定することも可能。その場合、srcdoc属性の方が優先され、srcdoc属性に未対応のブラウザなどではsrc属性の文書が使用される。
name ブラウジングコンテキスト(フレーム)の名前
値:ブラウジングコンテキスト名またはキーワード
allowfullscreen フルスクリーン表示を許可
論理属性(属性名だけで指定可)
sandbox この属性を指定したことによるセキュリティ上の制限のうち、解除する項目をキーワードで指定
値:キーワード(空白文字区切り)
allow-forms(フォームからのデータ送信を許可します。)
allow-pointer-lock(ポインタ・ロック API の実行を許可します。)
allow-popups(ポップアップ・ウィンドウの表示を許可します。)
allow-same-origin(親のドキュメントと 同一生成元 (same origin) と見なし,親ドキュメントで利用できる機能は利用可能にします。)
allow-scripts(スクリプト(ポップアップを除く)の実行を許可します。)
allow-top-navigation(最上位のブラウジング・コンテキストへのナビゲーションを許可します。)allow-scriptsallow-same-origin の2つの値を指定すると,sandbox属性 は 無効 となり, この属性の指定がない場合と同様の動作 となる。この sandbox属性 による指定は,コンテンツがロードされて表示される際に効力を持つ。従って、この sandbox属性 の値を変更したり,または,属性全体を削除しても,すでに表示されているページの表示内容には,何の変化もありません
width
値:整数(負の値は指定不可)HTML4.01やXHTML1.0では、width属性height属性の値に「ピクセル数」と「%」の両方が指定できたが、HTML5では「ピクセル数」しか指定できなくなっている
height 高さ
値:整数(負の値は指定不可)

hr要素

hr要素は、段落レベルで主題が変わるところ(区切り・変わり目)を示すための要素。たとえば、話題が変わるところや、物語の中で場面が変わるところなどで使用する。

以前は、横罫線を表示させるための要素だった。現在でも一般的なブラウザでは横罫線として表示されるが、HTML5ではどう表示させるかが規定されているわけではなく、特に線として表示させる仕様になっているわけではない点に注意

セクションは、それ自体が主題の区切りを示すため、セクションとセクションの間にhr要素を入れる必要はない。hr要素は、セクションの内部の「段落レベル」での区切りを示すために使用する。

script要素

script要素は、HTML文書内にスクリプトまたはデータブロックを組み込むための要素。スクリプトは要素内容として書き込むこともできるし、外部スクリプトをsrc属性で読み込ませることもできる。ただし、データブロックの場合は要素内容として書き込むことしかできない。

属性名
src 外部スクリプトのアドレス
値は、URL(空文字は不可)
type スクリプトまたはデータブロックの種類
値は、MIMEタイプ
charset 外部スクリプトの文字コード
値は、文字コード(エンコーディング)
async スクリプトを非同期で読み込ませ、読み込み完了後すぐに実行させる
値は、論理属性(属性名だけで指定可)
defer スクリプトを非同期で読み込ませ、ページ全体の解析処理が完了してから実行させる
値は、論理属性(属性名だけで指定可)
crossorigin 元文書とは異なるオリジンからデータを取得する際の認証に関する設定
crossorigin=”anonymous”
または
crossorigin=”use-credentials”
nonce CSPのノンス
値は、テキスト(ノンス)

type属性を省略した場合のデフォルト値は「text/javascript」。それ以外のものを組み込む場合は、type属性は必須。

CSPとは「Content Security Policy Level3」というセキュリティ対策の仕様。nonce属性の値にノンスと呼ばれるテキスト(サーバが送信するランダムな使い捨ての値)を埋め込むことで、悪意あるスクリプトを識別して実行させないようにする。

script要素にsrc属性が指定されている場合は、要素内容は空にするか、またはそのスクリプトの文法に合わせたドキュメンテーションしか入れられない。src属性が指定されていない場合の要素内容は、type属性の値によって異なる。

noscript要素

noscript要素は、スクリプトが無効の場合に利用されるコンテンツを要素内容として持つ要素。したがって、スクリプトが有効の状態では、この要素は利用されない。

noscript要素head要素内に配置された場合は、要素内容としてlink要素・style要素・meta要素を入れることができる。それ以外の場所に配置された場合はトランスペアレントになる。

noscript要素はHTML構文でのみ有効で、XHTML構文では使用できない

template要素

template要素は、その範囲がスクリプトによって生成(複製・挿入)される部分であることを示す要素

一般的なフローコンテンツメタデータコンテンツを自動生成できるほか、次に示す要素の要素内容となる範囲全体をタグで囲って自動生成させることができる。

table / tr / thead / tbody / tfoot / colgroup

ul / ol / dl

ruby

video / audio / object

figure / details / menu

select / fieldset

canvas要素

canvas要素は、スクリプトによって描画するビットマップの動的なグラフィックとなる要素。要素内容は、描画できない環境向けの内容となる。コンテンツモデルはトランスペアレント

属性名
width
値は、整数値(負の値は指定不可)
デフォルトは300
height 高さ
値は、整数値(負の値は指定不可)
デフォルトは150
>おとママのお買得商品×美容×好きなもの

おとママのお買得商品×美容×好きなもの

現在子育て中で忙しくしていますが、 自分が好きでいいなと思った物や 私が実際に使っていいと思った物、またセールなどでお得な商品などを紹介しています。よかったらたちよってみてください✨

CTR IMG