トップ > インターネット > ホームページ作成・素材 > HTMLの基礎−タグを覚えてウェブページを作ろう!−

ホームページはHTMLタグの知識とテキストエディタさえあれば作成できます。またタグを理解していればサイトの細かい部分まで手が届きます。でも、わからない・・そんな方にお送りする初心者向けのHTMLタグ講座「HTMLの基礎」。

RSS


メルマガの登録・解除

登録した方には、メルマ!からオフィシャルメルマガ(無料)をお届けします。



HTMLの基礎 Vol.36 動画・音声の貼り付け(embed・object)

発行日:3/4

*――*――*――*――*――*――*――*――*――*――*――*――*――*――*

    HTMLの基礎 −タグを覚えてウェブページを作ろう!−

      2005/03/04(Fri) Vol.36       執筆:ykr
              http://ykr.main.jp/html/index.html

*――*――*――*――*――*――*――*――*――*――*――*――*――*――*

   ◆◇◇◇◆◇◇◇◆◇◇◇◆◇◇◇◆◇◇◇◆◇◇◇◆◇◇◇◆   

   1.動画や音声を埋め込む <embed>

   2.オブジェクトを貼り付ける <object>

   ◆◇◇◇◆◇◇◇◆◇◇◇◆◇◇◇◆◇◇◇◆◇◇◇◆◇◇◇◆   


  今年は花粉が大量に飛散すると言われていますが、今のところ私は何と
  もありません。まだまだこれからなのでしょうか?それとも外にいる時
  間が少ないからかもしれません。皆さんはどうでしょうか?

  さて、今回は前回紹介した<applet>や<bgsound>に似たような働きを持つ
  タグを紹介します。ブラウザの種類やバージョン、環境などによっても
  動作が作用されるので、ここに記述したような結果にならない可能性が
  ありますのでご注意ください。

  それでは今回も最後までお付き合い宜しくお願いいたします。


  ※注意  HTMLのバージョンは4.01です。
       発刊時点で非推奨とされてるものも掲載しています。
       表示確認しているブラウザは、WinIE6、WinNN7、MacIE5.2
       MacNN7です。その他のブラウザでの表示は未確認ですので
       意図したとおりにならないことがあります。


━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━


1.動画や音声を埋め込む <embed>


  <embed>は、動画・音声などのプラグインを必要とするデータをページに
  埋め込む際に使用します。しかし、ブラウザのバージョンやプラグインソ
  フトのバージョンによっては再生できなかったり、動作が異なっていたり
  する為、注意が必要です。

  NNやIEでは実装されていますが、HTML4.01の規約にはとりいれられていま
  せん。(HTML4.01のタグリストには入っていませんがあえて紹介します。)
  HTML4.01では<embed>よりも<object>を使用することが推奨されていますが
  、対応していないブラウザがあったりする事より、<embed>を用いる事も多
  いようです。

  よく利用されるプラグインソフトに「Windows Media Player」「QuickTime」
  「RealPlayer」「Macromedia Shockwave Player」「Macromedia Flash Pla
  yer」・・等があります。指定する属性などは、使用するプラグインソフト
  の種類などによって異なります。

  また対応していないブラウザのために<noembed>があります。<noembed>
  </noembed>で囲まれた部分は、<embed>に未対応のブラウザでは表示され
  ますが、対応ブラウザでは表示されません。

  それではこの2つのタグの使用方法を見てみることにしましょう。


----------------------------------------------------------------------


 ■<embed src="sam.mid" width="200" height="40" loop="true">

  上記のように<embed>のsrc属性にファイル名を指定すると、ページに音声
  や動画のファイルを埋め込むことができます。データはそのデータ形式に
  よって対応したプラグインソフトに渡され再生されます。

  データによって使用されるプラグインソフトの種類により、指定する属性
  などが異なります。またブラウザの種類によっても動作が異なります。
  指定する属性の主なものに以下の属性があります。

  ▼<embed>の主な属性

   ・src    ・・ページに埋め込むファイルの名前
   ・width   ・・表示されるコントロールパネルの横幅
   ・height   ・・表示されるコントロールパネルの縦幅

   ・loop    ・・再生回数の指定  ▽true  繰り返し再生
                     ▽false  1回だけ再生
                     ▽数値  指定した数だけ再生

   ・autostart ・・ページ読み込み時の自動再生 ▽true 自動再生
                          ▽false 再生しない

   ・hidden   ・・コントロールパネルの表示  ▽true 表示しない
                          ▽false 表示する


 ■<noembed>プラグインが必要です。</noembed>

  <embed>タグに未対応のブラウザのためには<noembed>タグを使用します
  。この間に書かれた内容は、<embed>に対応しているブラウザには表示
  されず、対応していないブラウザにだけ表示されます。


━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━


2.オブジェクトを貼り付ける <object>


  このタグも<embed>や<applet>等のタグと同様、音声や動画、JavaApplet
  をページに貼り付けたりする際に使用します。HTML4.01ではこの<object>
  タグを使用する事が推奨されていますが、ブラウザやプラグインの種類に
  よって動作が大きく異なったり対応していないものもあります。


----------------------------------------------------------------------


 ■<object data="sam.gif" width="50" height="50" type="image/gif">
  </object>

  <object>を使用すると、上記のように画像ファイル等も貼り付けることが
  できます。但し、ブラウザによって多少動作が異なったりするので、注意
  が必要です。上記の属性については以下のとおりです。

   ▼属性について

    ・data  ・・ページに貼り付けるファイル名
    ・width  ・・横幅のサイズ(ピクセル又はパーセント)
    ・height ・・縦幅のサイズ(ピクセル又はパーセント)
    ・type  ・・データのMINEタイプ(MINEタイプとはデータのタイプ)


  その他にもさまざまな使用方法がありますが、ここでは深く言及しません。


━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━


  それでは、いつもと同じ手順でHTML文書を作成して表示を確かめて
  みましょう。面倒な方は前回の続きに上書きしても良いでしょう。


----------------------------------------------------------------------


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=Shift_JIS">
<title>音声や動画の埋め込み</title>
<bgsound src="sam.mid" loop="infinite">
</head>

<body>
<h1>音声や動画の埋め込み</h1>
<h2>embed要素</h2>
<hr>
<embed src="http://ykr.main.jp/html/sam/sam.mid" width="200" 
height="40" loop="true">
<noembed>再生できません。</noembed>
<hr>

<h2>object要素</h2>
<hr>
<object data="http://ykr.main.jp/html/sam/sam.jpg" width="180" 
height="180" type="image/jpeg">
</object>
<hr>
<p>
上記で使用した画像やサウンドデータはこの練習に限り、使用できます。<br>
なお、サウンドデータについては
<a href="http://www1.odn.ne.jp/yorkkoba/index.htm">KING OF YOKOSUKA
  Y.Kobayashi氏(KING OF YOKOSUKA) </a>が作成したものです。
</p>

</body>
</html>


----------------------------------------------------------------------


  さて、記述できたらファイルを保存します。
  前回のファイルに追加したという方は、上書き保存か名前をつけて、新
  しく保存して下さい。拡張子は「.html」です。

  なお、上記のソースは見やすくするためにタグを途中で改行させて表示
  していますが、実際は改行させずに記述して下さい。


----------------------------------------------------------------------


 ■<embed src="http://ykr.main.jp/html/sam/sam.mid" width="200" 
  height="40" loop="true">
  <noembed>再生できません。</noembed>


  <embed>要素のsrc属性で、サウンドデータを読み込んでいます。サウンド
  データは対応するプラグインソフトで再生されます。対応するプラグイン
  がない場合は<noembed></noembed>の間に記述された内容が表示されます。
  なお、ブラウザの種類やユーザー環境によっては表示されなかったりする
  こともあります。


 ■<object data="http://ykr.main.jp/html/sam/sam.jpg" width="180" 
  height="180" type="image/jpeg">
  </object>


  イメージデータをページに貼り付けています。<object>では他にもサウン
  ドデータや動画などのさまざまなデータを貼り付けることが可能ですが、
  ブラウザなどの対応や動作が異なるので注意して下さい。


━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━


来週は・・・

   ◆◇◇◇◆◇◇◇◆◇◇◇◆◇◇◇◆◇◇◇◆◇◇◇◆◇◇◇◆   

   1.パラメータを指定 <param>

   2.検索語入力欄 <isindex>

   ◆◇◇◇◆◇◇◇◆◇◇◇◆◇◇◇◆◇◇◇◆◇◇◇◆◇◇◇◆   

(予告なく変更する事があります)


■ 雑記 ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■


  今回も最後まで付き合ってくださった方、お疲れ様でした。

  前からですが、ここのところさらに運動不足です。忙しいのでかなり疲
  労してはいるのですが・・というか忙しくなるとデスクから動けないの
  でさらに運動不足に拍車がかかってしまうのです。しかも食べる量は増
  えているような・・

  さて、今回紹介したタグや前回紹介したタグ、似たような働きをするも
  のが沢山あり、いったいどれを使用したら良いのかわからなくなるかも
  しれません。複数の環境でテストしてみる・・といっても、普通はそう
  そう様々な環境を用意できるものでもありません。昔に比べればかなり
  ましになりましたが、全てのブラウザの動作などが一貫していれば良い
  のに・・なんて思ってしまいます。

  それでは、また次回も宜しくお願いいたします。


━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

■■■「HTMLの基礎」姉妹サイトです。よろしくお願いします。■■■■

■■■「全部まるごとスタイルシート」
■   http://ykr414.com/css/index.html
■   スタイルシート辞典です。プロパティごと、または目的ごとに引
■   け、ブラウザの対応状況なども掲載しています。
■   HTMLに加える事で、より細かいレイアウトの指定が可能に。
■   コピーペーストするだけで利用できるテンプレートのページも。

■■■「コマンドプロンプトを使ってみよう!」
■   http://ykr414.com/dos/index.html
■   コマンドプロンプトとは何かから始まり、バッチファイルの作成
■   法や、コマンド別・目的別に引けるコマンド辞典。
■   初心者でもわかるよう細かく説明。

■■■「伸び縮みマークアップ言語 XML」
■   http://ykr414.com/xml/index.html
■   SGMLのサブセットであるXMLは、ネット上で扱うデータを
■   記述するためのデータフォーマットで、柔軟性のある言語構造を
■   持っており、プログラムで自在にデータを情報処理できます。そ
■   のXMLを実際に文書を作成しながら解説。随時追加更新。

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■


・makers     http://ykr414.net/makers/
         ダイエットグッズ、美味しいもの、かわいいもの
         セレクトショップ。ちょっと珍しいグッズ・便利な
         サービスなどの情報も掲載。
         コラムなどのコンテンツもあります。

・YKR GALLERY   http://ykr414.net/
         CG、また実際に描いた絵を紹介するギャラリー。
         趣味で運営の為かなり更新が遅め。


*――*――*――*――*――*――*――*――*――*――*――*――*――*――*
  Auther       ykr
  Mail         ykr414@yahoo.co.jp
  URL          http://ykr.main.jp/html/index.html
  Copyright    (C)2004 ykr414. All rights reserved.
  Attention    掲載記事の無断転載を禁じます
*――*――*――*――*――*――*――*――*――*――*――*――*――*――*

最新の記事

ブックマークに登録する

TwitterでつぶやくLismeトピックスに追加するdel.icio.usに追加Buzzurlにブックマークニフティクリップに追加Yahoo!ブックマークに登録記事をEvernoteへクリップ
My Yahoo!に追加Add to Google

規約に同意してこのメルマガに登録/解除する

登録した方には、メルマ!からオフィシャルメルマガ(無料)をお届けします。


この記事へのコメント

コメントを書く


上の画像で表示されている文字を半角英数で入力してください。

※コメントの内容はこのページに公開されます。発行者さんだけが閲覧できるものではありません。
コメントの投稿時は投稿者規約への同意が必要です。

  1. コメントはありません。

このメルマガもおすすめ

  1. @(あっと)驚く!エクセル好きルアップ  

    最終発行日:
    2011/05/26
    読者数:
    4068人

    エクセル(Excel)の基礎から裏ワザまで... D-UP発行のマガジンは、1問1答の形式、詳細な解説付きで配信。さらに連動した懸賞サービスもあり、スキルとプレゼントを同時にゲット。映画情報もあるよ

  2. これ知ってます?Wordの小ワザ&便利ワザ

    最終発行日:
    2011/05/26
    読者数:
    4680人

    D-UPが送る、ほほー!っと納得ワード(Word)の小ワザ&便利ワザをクイズ形式で楽しく学んでいきます。知ってて損することはありません。あなたの文章にアクセントをつけてみませんか?懸賞のチャンスもWでお得。

  3. 全部フリーソフト!!

    最終発行日:
    2014/02/26
    読者数:
    4880人

    ネット上にはこんなに便利なソフトがいっぱい。仕事にも、遊びにも、あると絶対にお得で楽しいソフトを1つずつご紹介します。

  4. 高橋浩子の日本一“お気楽”なパソコンマガジン

    最終発行日:
    2017/05/25
    読者数:
    1130人

    「クスッと笑えてタメになる」をモットーとするテクニカルライター高橋浩子が魂を込めてお届けする週刊メルマガ。パソコン講座を中心に、便利ネタやおすすめサイトもご紹介。とにもかくにも、“お気楽”に楽しめる異色のエンターテイメントマガジンである。

  5. C#プログラミングレッスン

    最終発行日:
    2017/03/04
    読者数:
    973人

    C#での .NETプログラミングを易しく丁寧に解説するメールマガジンです。「C#プログラミング・レッスン」で、.NETプログラミングをマスターしましょう。

発行者プロフィール

過去の発行記事