HTML5_埋め込み式
サイトに画像を表示したい場合はimgタグを使います。
このタグの場所にURLの画像を貼り付ける形ですね。
では、画像以外は?
ということで調べました!HTML5から画像以外もペタペタ貼れます!
- video
タグの文字でもわかるかな?動画やオーディオファイルを読み込んで再生するタグです。
<video src="URL"></video>
このタグの間に書いた文字はvideoタグが実装されていない、HTML5が使えないブラウザのときに表示されます。「お使いのブラウザでは動画を再生できません」などの説明を書いておくといいと思います。
サイズ変更は画像と同じくwidth、heightで指定します。
動画が表示されない時に表示したい画像はposter="URL"で指定します。
他にもループ再生するloop、自動で再生させるautoplayなどの属性も持ってます。
- audio
オーディオ、そうですね、音楽ファイルなどの再生に使用します。
サイト内に音楽を鳴らすの前はやったなあ、でもこれはHTML5から追加だから別の方法でやってたのかな?
<audio src="URL"></audio>と表記します。
属性はvideoとほとんどいっしょかな、サイズなんかはないです。
キャンバスにグラフィックを描きます。というとimgタグと一緒かな?と思いそうですが、文字通り「描け」ます。
絵を描く人ならわかりやすいんですが、レイヤーといって画像を何枚も重ねたり、図形を書いたりと色んなことができます。
javascriptを併用してゲームを作ったりもできて楽しいです。
属性はwidthとheight。canvasの大きさを変えられます。
- area
画像内にハイパーリンクを指定できるようになります。
mapタグの中で使用するタグです。
coords属性でリンクの座標を指定、shape属性でリンクボタンの図形を指定します。
<img src="URL">
<map name="NAME">
<area shape="rect" coords="座標" href="URL" alt="説明">
上記は四角形のリンクボタンになってますね。コードで指定した座標を通るその図形がリンクボタンになっている形です。
地図などの画像を表示して、それぞれの地域や県をクリックするとその説明ページに飛ぶようにしたい場合などに使えます。