埋め込まれた外部リソースを表す<object>タグ、外部リソースが利用するパラメータを与える<param>タグ、インラインフレームを配置する<iframe>タグ、アプリケーションやコンテンツを埋め込む<embed>タグ（エンベッド）の使用方法を掲載
HTML5
対応ブラウザ
カテゴリー・コンテンツモデル
| 要素 | カテゴリー | コンテンツモデル |
|---|---|---|
| object要素 |
|
※0個以上のparam要素に続いて、フローコンテンツ、インタラクティブコンテンツの両方、もしくは一方を記述可 |
| param要素 | なし | 空 |
| iframe要素 |
|
|
| embed要素 |
空 |
グローバル属性（共通）
グローバル属性は、すべての要素に指定できる共通の属性のことです。
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
入力コントロールからデータを送信するときにスクリプトを実行します。
object要素 書式・概要
<object 属性="属性値">～</object>
<object data="URL" type="MIMEタイプ" width="幅" height="高さ">～</object>object要素は、さまざまな形式のデータを配置することのできる汎用的な要素です。具体的には、画像・動画・プラグインデータ・他のHTML文書などを配置することができます。
この要素の特徴は、指定した形式のデータをブラウザが取り扱うことができる場合には要素内容を無視することです（param要素を除く）。したがって、優先させたい順にobject要素を入れ子にしておくと、ブラウザが利用可能なデータ形式があった時点でそのデータを配置して、さらに深い入れ子となっている別のデータを無視されることができます。
使用できる属性
data
object要素によって埋め込む外部リソースURLを指定します。
type
埋め込まれる外部リソースのMIMEタイプを指定します。
typemustmatch（タイプ・マストマッチ）
【論理属性】
埋め込まれる外部リソースがtype属性で指定したMIMEタイプと一致する場合にのみ、埋め込み許可をします。
name
【必須】
埋め込まれる外部リソースに名前を付与します。
usemap
埋め込まれた外部リソースをクライアントサイドクリッカブルマップとして扱う場合、その対象となるmap要素と指定されたname属性値を指定します。
form
任意のform要素に付与したid属性値を指定することで、そのフォームとform属性を持つ入力コントロールなどを関連付けることができます。
width
外部リソースの幅を指定します。正の整数を指定する必要があります。
height
外部リソースの高さを指定します。正の整数を指定する必要があります。
使用方法
<!DOCTYPE html>
<html lang="ja">
<head>
<title>サンプルページ</title>
<meta charset="uft-8">
</head>
<body>
<object data="okinawa.mp4" type="video/mp4" width="640" height="360">
<object data="okinawa.jpg" type="image/jpeg" width="640" height="360">
<img src="okinawa.jpg" width="640" height="360" alt="写真">
</object>
</object>
</body>
</html>param要素 書式・概要
<param 属性="属性値">param要素はobject要素によって埋め込まれる外部リソースが利用するパラメータを与えます。param要素自身が何かを表すことはありません。
使用できる属性
name
【必須属性】
パラメータ名を指定します。
value
【必須属性】
パラメーターの値を指定します。
embed要素 書式・概要
<embed 属性="属性値">embed要素は外部アプリケーションやインタラクティブコンテンツを埋め込むための要素です。Flashなど、プラグインが必要な非HTMLコンテンツの埋め込みに使用されます。
使用できる属性
src
文書内に埋め込むスクリプトのURLを指定します。
type
埋め込まれる外部リソースのMIMEタイプ
width
アプリケーションの幅を指定します。正の整数を指定する必要があります。
height
アプリケーションの高さを指定します。正の整数を指定する必要があります。
使用方法
<!DOCTYPE html>
<html lang="ja">
<head>
<title>サンプルページ</title>
<meta charset="uft-8">
</head>
<body>
<object width="640" height="360">
<param name="allowScriptAccess" value="domain">
<param name="movie" value="sample.swf">
<param name="quality" value="autolow">
<embed src="sample.swf" type="application/x-shockwave-flash">
<p>Flashプレーヤーが有効時は、サンプル動画表示されます。</p>
</object>
</object>
</body>
</html>iframe要素 書式・概要
<iframe 属性="属性値">～</iframe>
<iframe src="HTML文書のURL" name="フレーム名">～</iframe>iframe要素は、インラインフレーム（HTML文書内でさらに別の文書を表示される領域）を表示させる要素です。フレーム内には、src属性で指定された別のHTML文書が表示されます。
<iframe>～</iframe>の間には、インラインフレームをサポートしていないブラウザや、インラインフレームを表示しないように設定している環境で表示させたい内容を入れておきます。
iframeの親ページとiframe内のページでは、JavaScriptを使用したデータ相互の受け渡しも可能です。また、親ページからiframe内のJavaScriptへのアクセスやiframe内から親ページのJavaScriptをキックすることもできます。
使用できる属性
src
表示するページのURLを指定します
srcdoc
インラインフレームの内容を属性値として直接記述できます。ダブルクオーテーションがでてくるときは、「":」のようにHTMLエスケープしてください。ブラウザがsrcdoc属性をサポートしている場合は、src属性より優先されます。
width
フレームの幅を指定します。正の整数を指定する必要があります。
height
フレームの高さを指定します。正の整数を指定する必要があります。
name
インラインフレームの名前を指定します。
sandbox
インラインフレーム内の表示に制限を加えます。複数の属性値を指定するにはスペースで区切って記述します。空文字を指定すると最大限の制限がかかります
| 属性値 | 説明 |
|---|---|
| allow-same-origin | インラインフレーム内のページが、呼び出し元と同じオリジン扱いになる |
| allow-scripts | インラインフレーム内のスクリプトの実行許可する。ただしポップアップウィンドウは使えない |
| allow-forms | インラインフレーム内のスクリプトの実行を許可する |
| allow-modals | インラインフレーム内のページがモーダルウィンドウで開くことを許可する |
| allow-orientation-lock | インラインフレームナインページに、ScreenOrientationAPIによるスクリーンの向きの操作を許可する |
| allow-pointer-lock | インラインフレーム内のページにPointer Lock APIの使用を許可する |
| allow-popups | window.open、target=_blank、showModalDialogのようなポップアップを許可する |
| allow-popusps-to-escape-sandbox | sandbox属性がかけられたインラインフレーム内のページでは、そのページのなかで 新たなウィンドウが開かれた場合にsandbox属性を継承するが、この属性値を指定すると、新たなウィンドウではsandbox属性を継承しなくなる |
| allow-top-navigation | インラインフレーム内のページから、読み込み元のページを操作することを許可する。 |
使用方法
親ページのサンプル
<!-- 親ページ -->
<!DOCTYPE html>
<html lang="ja">
<head>
<title>iframe要素サンプルページ</title>
<meta charset="uft-8">
</head>
<body>
<h1>iframe要素サンプルページ</h1>
<iframe width="600" height="400" src="iframe_child_sample_base.html">
</body>
</html>iframe内のページサンプル
<!-- iframe内ページ -->
<!DOCTYPE html>
<html lang="ja">
<head>
<title>iframe内のページ</title>
<meta charset="uft-8">
</head>
<body>
<h1>iframe内のページ</h1>
<img width="600" height="400" src="iframe_sample.jpg">
</body>
</html>chrome 実行サンプル
Firefox 実行サンプル
edge 実行サンプル
opera 実行サンプル
コメント