liguofeng29’s blog

個人勉強用ブログだっす。

HTML5の要素と属性 - HTML5新規要素③(meterとprogress)

HTML5から特殊な要素が追加されている

meter

  • value : 現在値、デフォルト0
  • min : 最小値、デフォルト0
  • max : 最大値、デフォルト1
  • low : 指定範囲の最小値、minより大きい
  • high : 指定範囲の最大値、maxより小さい
  • optimum : best値?

progress

  • max : 完成値
  • value : 現在値

サンプル

<!DOCTYPE html>
<html>
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=SJIS" />
   <title> meterとprogress </title>
</head>
<body>
現在の速度:<meter value="120" min="0" max="220" low="0" high="160">
    120</meter>km/h<br/>
完成度:<progress value="30" max="100">30/100</progress>
</body>
</html>

f:id:liguofeng29:20160117162219p:plain