For reference when creating a website
MK-BLOG
ホーム > MK-BLOG:ホームページ制作の参考に > Web制作技術(HTML/CSS/JS) > さまざまな形式のデータの配置

さまざまな形式のデータの配置:html step14

さまざまな形式のデータの配置

さまざまな形式のデータの配置:html step14

前回は、動画や音声を埋め込む方法をサンプルソースコードと共に記載いたしました。

文章で、たとえばこのブログのように、サンプルソースコードなどを使用する場合は、文章のほうが理解度が深まりますが、 それ以外の手順などの説明などは、動画のほうが直感的に手順などを分かりやすく、伝えることができることが多々あるかと思います。

料理のレシピ動画や、手順などはまさに動画を使用すると、ユーザーに分かりやすく伝えることができることと思います。

という事で、それでは今回はッ、

上記について記載していこうと思います...。

さまざまな形式のデータの配置

object要素

object要素は、さまざまな形式のデータを配置することができる汎用的な要素です。
具体的には、画像・動画・プラグインデータ・他のHTML文書などを配置することができます。

この要素の特徴は、指定した形式のデータをブラウザが取り扱うことができる場合には要素内容を無視することです。
したがって、優先させたい順にobject要素を入れ子にしておくと、ブラウザが利用可能なデータ形式があった時点でそのデータを配置して、さらに深い入れ子となっている別のデータを無視させることができます。

<object deta="URL" type="MIMEタイプ" width="幅" height="高さ"> ~ </object>
URL配置するデータのURL
MIMEタイプ配置するデータのMIMEタイプ
配置するデータの幅(CSSピクセル数)
高さ配置するデータの高さ(CSSピクセル数)
Sample<object deta="TrekEmonda.mp4" type="video/mp4" width="640" height="360">
<object data="TrekEmonda.jpg" type="images/jpeg" width=640" height="360">
<img src="TrekEmonda.jpg" width="640" height="360" alt="トレックエモンダ">
</object>
</object>

プラグインを利用するデータを配置

embad要素は、プラグインを使用するコンテンツを配置する際に使用する要素です。

基本的には、下記サンプルの形式で紹介する属性が利用できますが、使用するプラグインによって他のさまざまな属性が利用可能です。 詳しくは、各プラグインのマニュアルなどをご参照いただければ幸いです。

この要素は空要素であるため、利用可能なプラグインが存在しなかった場合の代替コンテンツは指定できない点に注意が必要になります。

<embad src="URL" type="MIMEタイプ" width="幅" height="高さ">
URLプラグインが使用するデータのURL
MIMEタイププラグインが使用するデータのMIMEタイプ
プラグインが使用するデータの幅(CSSピクセル数)
高さプラグインが使用するデータの高さ(CSSピクセル数)
Sample<embad src="TrekEmonda.dcr" type="application/x-director" width="640" height="360">

という事で今回は、さまざまな形式のデータの配置方法について記載してみました。

個人的には、実際のウェブ制作の際はあまり使用することがありませんが、前回含め、色々な指定方法があることを理解しておく必要がある事と思います。

クライアントによっては、YouTubeを埋め込みたいや、MP4で動画説明があるなどの場合が多々ございますので、前回および今回記載した指定方法をしっかりと覚えるとまではゆかなくとも、複数の指定方法があることを理解しておけば、制作現場で戸惑うこと無く作成をおこなうことができることと思います。

とりあえず、今回はここまで...。

お仕事のご依頼は下記より...、それではまた次回...。