HTML5―新しい要素０２

HTML5 授業



HTML5―新しい要素


figure要素、figcaption要素


ソースコード【 HTML 】

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>その他の新しい要素</title>
<link rel="stylesheet" href="">
<script src=""></script>
<!--[if lte IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!--[if lte IE 9]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<![endif]-->
</head>
<body>
<section>
<h1>工房のまわりにいる動物たち</h1>
<figure>
<img src="img/11.jpg" alt="コックのような姿を見せた犬" width="250" height="165" itemprop="image">
<figcaption>工房の近くに姿を見せた犬</figcaption>
</figure>
</section>
</body>
</html>

ブラウザで表示【 Chrome 】





HTML5 Outliner【 Chrome 】






audio要素

  • 対応ブラウザは限られている
  • 数種類の代替えコンテンツが必要となるため、audio要素を利用できるのはスマートフォン限定と考える


ソースコード【 HTML 】

<section>
<h1>サウンドの再生</h1>
<audio src="sound/sample.mp3" autoplay controls>
<p>再生されない場合は、audio要素対応ブラウザで表示してください。</p>
</audio>
</section>




属性値
任意属性
src=""音声の指定URL埋め込む音声のURL
preload=""先読みの目安none先読みを必要としない
metadataメタデータだけは先読みしてほしい
auto音声全体を先読みしてほしい
mediagroup=""グループ名文字列属するグループの名前
autoplay自動再生を行う（autoplay）値は省略可能
loopループ再生を行う（loop）値は省略可能
muted音声を出さない（muted）値は省略可能
controlsコントローラを表示する<（controls）値は省略可能



無料効果音





video要素


ソースコード【 HTML 】

<section>
<h1>動画の再生</h1>
<video src="video/sample.mp4" autoplay controls>
<p>再生されない場合は、video要素対応のブラウザで表示してください。</p>
</video>
</section>