HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTMLのobject要素におけるdata属性の使い方を解説

<object>要素のdata属性は、そのオブジェクトが使用するリソース（音声、動画、PDF、Flashなど）のURLを指定するための属性です。外部コンテンツをページに埋め込む際に、どのファイルを読み込むかをこの属性で決定します。

data属性の基本構文

data属性の書き方は以下のとおりです。

<object data="url">

url の部分には、オブジェクトで読み込みたいリソースのURLを記述します。

実装例

それでは、<object>要素のdata属性を使った具体的なコード例を見てみましょう。

<!DOCTYPE html>
<html>
<body>
<h2>CSS Demonstrating Application</h2>
    <object data="https://www.tutorialspoint.com/flex/samples/CSSApplication.swf" height="400" width="600"></object>
</body>
</html>

出力結果

上記のコードでは、data属性にリソースのURLとして .swf ファイル、つまりFlashファイルを指定しています。

<object data="https://www.tutorialspoint.com/flex/samples/CSSApplication.swf" height="400" width="600"></object>

ここで<object>要素内に設定した外部リンクは次のとおりです。

https://www.tutorialspoint.com/flex/samples/CSSApplication.swf

補足：Flashサポート終了について

なお、上記の例で使われているSWF形式（Flash）は、2020年12月にAdobeによるサポートが終了しており、現在の主要ブラウザでは表示できません。そのため、実際の開発では、PDFファイルやSVG画像、動画などをdata属性で指定して埋め込む方法が主流となっています。

  1. HTMLのstyle属性とは？構文と使い方をサンプルコード付きで解説

    HTMLのstyle属性は、ドキュメント内の個々の要素に対してインラインスタイルを直接指定するための属性です。style属性はグローバル属性に分類されるため、すべてのHTML要素で使用できるのが特徴です。 style属性の基本 style属性の値には、「プロパティ名: 値;」という形式でCSSを記述します。複数のスタイルを同時に指定したい場合は、セミコロン（;）で区切って並べることで、1つの要素にまとめてスタイルを適用できます。 構文 style属性の基本的な構文は次のとおりです。 <タグ名 style="CSSプロパティ: 値;"></タグ名> そ

  2. HTML DOM Objectのdataプロパティとは？使い方とサンプルコードを解説

    HTML DOM Object dataプロパティとはHTML DOMのObject要素が持つdataプロパティは、<object>要素のdata属性の値に対応する文字列（URL）を取得または設定するためのプロパティです。このプロパティを使うことで、JavaScriptから動的にオブジェクトで埋め込まれたリソースのURLを読み取ったり、変更したりすることができます。構文data属性の値を取得する場合ObjectElement.datadata属性に文字列値（URL）を設定する場合ObjectElement.data = URLStringHTML DOM Object dataプロ