no-image

コンテンツの組み込み

img/画像

画像を表示する。

結果

薔薇の画像

解説

<img>タグは、画像を表示するためのタグです。画像の種類は基本的に「jpg(ジェイペグ)」、「gif(ジフ)」、「png(ピング)」の3種類です。

  • 「width="幅"」、「height="高さ"」
    →高さと幅を指定します。単位はピクセルです。
  • 「alt="代替テキスト"」
    →画像が表示されないときのために指定します。また、検索エンジンロボットは「画像を判別することができない」ので何の画像なのか、文字として認識させる必要があります。

audio/音声

音声(オーディオ)。

結果

解説

<audio>は、音声データを再生するためのタグです。

「controles」は、コントローラーを表示したいとき。

「autoplay」は、ページ表示してすぐに再生したいとき。

「loop」は、ループ再生。

「preload」は、データを事前にどこまで読み込んでおくかの指定です。none、metadata、autoを指定できます。

「muted」は、音声をミュート状態にできます。

video/動画

動画(ビデオ)。

結果

解説

<video>は、動画データを再生するためのタグです。

「width」は、横幅。「height」は縦幅。

「controles」は、コントローラーを表示したいとき。

「autoplay」は、ページ表示してすぐに再生したいとき。

「loop」は、ループ再生。

「preload」は、データを事前にどこまで読み込んでおくかの指定です。none、metadata、autoを指定できます。

「muted」は、音声をミュート状態にできます。

map/イメージマップ

イメージマップ

結果

サンプル

四角 丸 三角 その他の領域

解説

<map>タグの中に、<area>を指定することで、ひとつの画像に複数のリンクを貼ることができます。

丸、四角形、多角形と大きさ・形も様々です。非常に便利な反面、これを手打ちで行うのは座標を確認する必要があり手間がかかりすぎます。

Dreamweaverなどのソフトでは、自動で座標を取ってくれますが、無料ソフトでも可能なものもあります。

「coords」
→リンクに指定する座標

「shape」
→形状。circleは、丸。rectは、四角形。polyは、多角形。

object/汎用組込み

外部コンテンツを表示。

結果

ご利用のブラウザでは対応しておりません。

解説

<object>は、プラグイン等を埋め込みたいときに使います。

画像やインラインフレームのようにHTMLを呼び出したりもできます。

コンテンツ属性について。

「width」は、横幅。「height」は縦幅。
「data」は、組み込むデータのアドレスを書きます。
「type」は、MIMEタイプ。
「name」は、リンクのターゲット名。
「usemap」は、イメージマップに関連付けされていることをあらわします。
「form」は、<form>タグにidを加えることでフォームからコントロールできます。

iframe/インラインフレーム

インラインフレーム。

結果