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

HTMLで埋め込みオブジェクトを含める方法｜objectタグの使い方と属性一覧

埋め込みオブジェクトをHTMLに含める方法

HTML文書に埋め込みオブジェクトを含めるには、<object>タグを使用します。HTMLの<object>タグは、画像や動画、音声などのマルチメディアコンテンツをHTML文書内に埋め込むためのタグです。

また、<param>タグを<object>タグと組み合わせて使用することで、埋め込むオブジェクトに対してさまざまなパラメータを渡すことができます。

<object>タグで利用できる主な属性

HTMLの<object>タグでは、以下のような属性がサポートされています。

属性値説明
alignleft
right
top
bottom		オブジェクトの視覚的な配置（アラインメント）を定義します
archiveURLアーカイブファイルへのURLをスペース区切りで列挙します
borderピクセルオブジェクト周囲の境界線の幅を指定します
classidクラスIDWindowsレジストリまたはURLで設定されたクラスIDの値を定義します
codebaseURLオブジェクトのコードが格納されているパスを指定します
codetypeMIMEタイプclassid属性で参照されるコードのインターネットメディアタイプを指定します
dataURLオブジェクトのデータ（リソース）のURLを指定します
declaredeclareオブジェクトを宣言のみとし、必要になるまで生成・インスタンス化しないことを定義します
heightピクセルオブジェクトの高さを指定します
hspaceピクセルオブジェクト周囲の水平方向の余白を指定します
nameオブジェクト名オブジェクトの一意な名前を指定します
standbyテキストオブジェクトの読み込み中に表示するテキストを定義します
typeMIMEタイプdata属性で指定されたデータのMIMEタイプを定義します
usemapURLオブジェクトと一緒に使用するクライアントサイドイメージマップのURLを指定します
vspaceピクセルオブジェクト周囲の垂直方向の余白を指定します
widthピクセルオブジェクトの幅を指定します

補足： 上記のうち、align、border、classid、codebase、codetype、declare、hspace、vspace、standbyなどの属性はHTML5で廃止されています。現在のWeb開発では、レイアウトや余白の制御にはCSSを、外部コンテンツの埋め込みには<iframe>や<embed>タグを使用するのが一般的です。

実装例

以下のコードを実行すると、HTMLで<object>タグを使ってオブジェクトを埋め込む動作を確認できます。

<!DOCTYPE html>
<html>
   <head>
      <title>HTML object Tag</title>
   </head>
   <body>
      <object data = "/html/test.jpg" type = "text/html" width = "300" height = "200">
         alt : <a href = "/html/test.htm">test.jpg</a>
      </object>
   </body>
</html>

この例では、<object>タグのdata属性で読み込むファイルを指定し、width属性とheight属性で表示サイズを設定しています。オブジェクトが正しく表示されない場合に備えて、タグ内に代替リンク（alt）を記述しておくと、ユーザーが元のファイルへアクセスできるため便利です。

  1. HTMLページにCSSを組み込む3つの方法｜インライン・内部参照・外部参照の違いと書き方

    CSSをHTMLページに組み込む方法は、大きく分けて次の3つがあります。 インライン（Inline）：要素のstyle属性に直接スタイルを指定する方法です。手軽に使えますが、コードの保守性や再利用性を考えると、内部参照または外部参照の利用が推奨されます。 内部参照（Internal）：HTMLドキュメントの<head>タグ内に配置した<style>タグの中に、CSSの定義をまとめて記述する方法です。 外部参照（External）：<link>タグを使って、ローカル環境やサーバー上に置かれた.cssファイルを読み込む方法です。CSSを外部ファイルとして切り出

  2. HTMLにオーディオ・ビデオコントロールを組み込む方法を解説

    HTMLで動画や音声ファイルを扱う際、controls属性を指定するだけで、ブラウザ標準の操作パネル（再生・一時停止ボタン、音量調整、シークバーなど）を簡単に表示できます。特別なスクリプトは不要で、属性を1つ追加するだけで実装できるのが魅力です。controls属性の基本videoタグまたはaudioタグにcontrolsと記述するだけで、ユーザーがメディアを自由に操作できるようになります。この属性が指定されていない場合、再生ボタンなどは表示されず、自動的に再生されない限りコンテンツを視聴できません。実装例以下のコードは、videoタグにcontrols属性を適用したシンプルなサンプルです。実