VIDEO LESSON

HTMLのobjectタグとは？属性・使い方・ブラウザー互換性と活用例の解説動画

再生時間 7:42動画を別のタブで開く ↗

動画の字幕・文字起こしを読む

再生中の字幕を濃い黒で表示し、一番上に追従します。字幕の行を選ぶと、その位置から再生できます。

0:00こんにちは。
0:00エイチティーエムエル、リファレンス解説です。
0:04HTMLタグ編の四十六本目は、オブジェクトタグです。
0:08オブジェクトは、ピー・ディー・エフや画像、別のエイチティーエムエルページなど、
0:14外部のファイルをそのままページの中に埋め込むためのタグです。
0:19最大の特徴は、開始タグと終了タグの内側に、表示できなかったときの代替内容を書いておけることです。
0:27今回は基本の書き方から、データ属性とタイプ属性、サイズの指定、ほかの埋め込みタグとの使い分けまで、
0:32順に確認していきます。
0:37どんな場面で使うのかを整理します。
0:40代表例は、ピー・ディー・エフの資料を、ダウンロードさせるだけでなくページの中でそのまま読めるようにする場面です。
0:48ほかにも、エスブイジーの図版や、別のエイチティーエムエルファイルを部品のように埋め込む使い方ができます。
0:56ただし、何でもオブジェクトで済ませるわけではありません。
1:01画像にはイメージタグ、動画にはビデオタグという専用のタグがあります。
1:06専用タグがない形式や、汎用的に外部リソースを差し込みたいときにオブジェクトを選ぶ、
1:11という位置づけで覚えてください。
1:15基本の書き方を確認します。
1:17オブジェクトには、開始タグと終了タグの両方が必要です。
1:21開始タグのデータ属性に、埋め込みたいファイルのユーアールエルを書きます。
1:27画面の例では、ガイドというピー・ディー・エフファイルを指定しています。
1:33タイプ属性には、そのファイルの種類を示すマイムタイプを書き、幅と高さで表示領域の大きさを決めます。
1:40そして終了タグまでの内側に、もし表示できなかったときに見せる文章を置きます。
1:46この三点セット、ファイルの指定、種類の指定、代替内容が、オブジェクトの基本形です。
1:53中心になる二つの属性を詳しく見ます。
1:56まずデータ属性です。
1:57これはオブジェクトで埋め込むリソースのユーアールエルを指定するもので、必ず書く属性です。
2:04ここで初心者が混同しやすいのが、アプリ独自の値を入れるデータスター属性との違いです。
2:10名前は似ていますが、まったくの別物なので注意してください。
2:14次にタイプ属性です。
2:16埋め込むファイルのマイムタイプ、つまりデータの種類をブラウザーに伝えます。
2:22ピー・ディー・エフならアプリケーションピー・ディー・エフ、エスブイジーならイメージエスブイジープラスエックスエムエルという具合です。
2:31種類が正しく伝わると、ブラウザーは適切な方法で表示を試みられます。
2:36サイズの指定について確認します。
2:39ウィドゥス属性が表示領域の幅、ハイト属性が高さで、どちらもピクセル単位の数値で指定します。
2:46ピー・ディー・エフのビューアーのように、埋め込んだ内容にはある程度の広さが必要です。
2:53小さすぎると読みにくくなり、大きすぎると周りの文章を圧迫します。
2:58ポイントは、幅と高さの比率を元ファイルの形に近づけることです。
3:03比率が合っていないと、余白が目立ったり内容が窮屈になったりします。
3:08また、読み込み前から領域の大きさが分かっていると、ページのレイアウトが途中でガタッとずれる現象も防ぎやすくなります。
3:17スマートフォンのような細い画面でもはみ出さないか、あわせて確認しましょう。
3:23オブジェクトならではの仕組み、代替内容を解説します。
3:26ブラウザーがファイルを読み込めなかったり、対応する表示方法がなかったりすると、
3:31オブジェクトの内側に書いた内容が代わりに表示されます。
3:36記事の活用例でも使われている定番の形は、ピー・ディー・エフへのリンクを置くことです。
3:42ページ内では読めなくても、リンクからファイルを開いたり保存したりする道が残ります。
3:48逆に、内側を空っぽにしてしまうと、失敗したときに利用者は何もできない空白だけを見ることになります。
3:54埋め込みは必ず成功するとは限らない、という前提で、代替内容は必ず用意しておきましょう。
4:01似た役割のタグとの違いを整理します。
4:03画像はイメージタグ、動画はビデオタグ、音声はオーディオタグが専用で、再生ボタンなどの機能もそろっています。
4:12別のウェブページを枠として表示する目的なら、アイフレームの方が一般的です。
4:18エンベッドタグも外部内容を埋め込みますが、内側に代替内容を書く仕組みがありません。
4:25その点オブジェクトは、汎用的に埋め込めて、失敗時の代替まで面倒を見られるのが強みです。
4:31ただし裏を返せば、専用タグがある形式では、それぞれの専用タグの方が設定が簡単で機能も豊富です。
4:39迷ったら、まず専用タグがないかを探し、なければオブジェクト、と順に考えるとよいでしょう。
4:46補助的な二つの属性も押さえておきます。
4:49ネーム属性は、そのオブジェクトに名前を付けるためのものです。
4:53フォームの部品では送信時のキーになるなど、要素によって役割が変わりますが、
4:58オブジェクトでは識別や参照のために使われます。
5:02もう一つのフォーム属性は、関連付けるフォーム要素の、アイディーを指定します。
5:08名前ではなくアイディーを書く点がポイントです。
5:12正直なところ、ピー・ディー・エフや図版をただ埋め込むだけの使い方では、この二つはほとんど出番がありません。
5:20基本のデータ、タイプ、幅、高さの四つを先に身につけ、名前などが必要になった場面で思い出せれば十分です。
5:27よくある間違いを三つ確認します。
5:30一つ目は、タイプ属性と実際のファイルの種類が食い違うことです。
5:34種類の情報が間違っていると、ブラウザーが正しく表示できません。
5:39二つ目は、代替内容を書かないことです。
5:42前のセクションで見たとおり、失敗したときに利用者が行き止まりになってしまいます。
5:48三つ目は、昔のプラグインを必要とする古い形式に頼ることです。
5:53現在のブラウザーはプラグイン方式をほぼ支えていないため、ピー・ディー・エフやエスブイジーなど、
5:58ブラウザーが標準で扱える形式を選ぶことが大切です。
6:04加えて、外部ファイルのパスが間違っていれば当然表示されません。
6:08表示されないときは、まずファイルの場所と名前を確認してください。
6:13ブラウザー互換性を確認します。
6:15記事が参照するエムディーエヌの記録では、オブジェクトタグはクロームが一以降、
6:22エッジが十二以降、ファイアフォックスが一以降、サファリが三以降と、主要ブラウザーで最初期から対応しています。
6:29今回扱ったデータ、タイプ、幅、高さ、ネーム、フォームの各属性も、同じく最初期からの対応です。
6:36ただし注意点が一つあります。
6:38タグ自体が使えても、埋め込むファイル形式の表示はブラウザーや端末の環境に左右されます。
6:44特にピー・ディー・エフのページ内表示は環境差が出やすいので、対象の端末で実際に開いて確認し、
6:49代替のリンクも必ず用意してください。
6:53最後にまとめです。
6:55オブジェクトタグは、ピー・ディー・エフなどの外部リソースをページに埋め込む、
6:59汎用的なタグでした。
7:02ポイントは三つです。
7:04一つ目、データ属性にファイルのユーアールエル、タイプ属性にマイムタイプを書き、
7:08幅と高さで表示領域を決めること。
7:13二つ目、内側には表示できないときの代替内容を必ず置き、リンクなどで次の手段を用意すること。
7:20三つ目、画像や動画など専用タグがある形式では、専用タグを優先することです。
7:26練習として、手元のピー・ディー・エフを一つ埋め込み、わざとファイル名を間違えて代替内容が出るか確かめてみてください。
7:35成功と失敗の両方を体験すれば、理解は十分です。
7:39お疲れさまでした。
7:40次回もお楽しみに。

日本語字幕をダウンロード（WebVTT）

この動画で学べること

objectタグの役割と属性を、コード例・活用事例・注意点とともに解説。Chrome・Edge・Firefox・Safariの互換性も確認できます。外部リソースを埋め込み、利用できない場合の代替内容を内側に置けます。

解説記事・サンプルコードを読む：HTMLのobjectタグとは？属性・使い方・ブラウザー互換性と活用例 →