HTML辞典 object要素、param要素、embed要素、iframe要素の解説

HTML辞典 HTML辞典
この記事は約13分で読めます。

埋め込まれた外部リソースを表す<object>タグ、外部リソースが利用するパラメータを与える<param>タグ、インラインフレームを配置する<iframe>タグ、アプリケーションやコンテンツを埋め込む<embed>タグ(エンベッド)の使用方法を掲載

HTML5

対応ブラウザ

ruby要素,rb要素,rt要素、rp要素、rtc要素 対応ブラウザ:chrome
ruby要素,rb要素,rt要素、rp要素、rtc要素 対応ブラウザ:firefox
ruby要素,rb要素,rt要素、rp要素、rtc要素 対応ブラウザ:safari
ruby要素,rb要素,rt要素、rp要素、rtc要素 対応ブラウザ:ms edge
ruby要素,rb要素,rt要素、rp要素、rtc要素 対応ブラウザ:ms ie
ruby要素,rb要素,rt要素、rp要素、rtc要素 対応ブラウザ:opera

カテゴリー・コンテンツモデル

要素 カテゴリー コンテンツモデル
object要素
  • インタラクティブコンテンツ
  • エンベッディッドコンテンツ
  • サブミット可能なフォーム関連要素
  • パルパブルコンテンツ
  • フレージングコンテンツ
  • リスト可能なフォーム関連要素
  • インタラクティブコンテンツ
  • フローコンテンツ

※0個以上のparam要素に続いて、フローコンテンツ、インタラクティブコンテンツの両方、もしくは一方を記述可

param要素 なし
iframe要素
  • インタラクティブコンテンツ
  • エンベッディッドコンテンツ
  • パルパブルコンテンツ
  • フレージングコンテンツ
  • フローコンテンツ
  • 文書をHTMLで扱う場合はテキスト
  • 文書をXMLとして扱う場合は空
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

インラインフレームの内容を属性値として直接記述できます。ダブルクオーテーションがでてくるときは、「&quot:」のように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-popupswindow.open、target=_blank、showModalDialogのようなポップアップを許可する
allow-popusps-to-escape-sandboxsandbox属性がかけられたインラインフレーム内のページでは、そのページのなかで 新たなウィンドウが開かれた場合に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 実行サンプル

基本的なサンプル iframe要素のchrome実行サンプル

Firefox 実行サンプル

基本的なサンプル iframe要素のfirefox実行サンプル

edge 実行サンプル

基本的なサンプル iframe要素のedge実行サンプル

opera 実行サンプル

基本的なサンプル iframe要素のopera実行サンプル

コメント

タイトルとURLをコピーしました