計算の結果出力を表す<output>タグ、進捗状況を表す<progress>タグ、特定の範囲にある数値に表す<meter>タグの基本的な使用方法を掲載
HTML5
対応ブラウザ
カテゴリー・コンテンツモデル
| 要素 | カテゴリー | コンテンツモデル |
|---|---|---|
| output要素 |
|
|
| progress要素 |
|
|
| meter要素 | なし | フレージングコンテンツ |
グローバル属性（共通）
グローバル属性は、すべての要素に指定できる共通の属性のことです。
accesskey（アクセスキー）
要素にアクセスキーを割り当てます。いわゆるショートカットキーになります。
autocapitallze
入力／編集されたとき、入力文字列の先頭大文字化が自動的に行われるかどうかなどを指定します
| 値 | 内容 |
|---|---|
| offまたはnone | 自動的な大文字化は指定しない |
| onまたはsentences | 最初の文字を大文字化する |
| words | 各語の最初の文字を大文字化する |
| characters | すべての文字を大文字化する |
class（クラス）
要素に分類上の名前を指定します。CSSのセレクタで、特定の要素を選択できるようになります。
contenteditable（コンテント・エディタブル）
要素の内容が閲覧者による編集可能かどうか指定します。
| 値 | 内容 |
|---|---|
| trueまたは、空 | 閲覧者による編集可能。 |
| false | 閲覧者による編集不可。 |
data-
カスタムデータ属性、JavaScriptで使用するための独自の属性を指定します。「data-*****=””」のような形式で開発者が自由に指定できます。JavaScriptを利用してデータ処理したり、独自のデータを入力したりするために使用します。
dir（ディレクショナリティ）
要素の内容の書字方向（文字を書き進める方向）を指定します。
| 値 | 内容 |
|---|---|
| ltr | テキストを左から右へ書き進める。「Left to Righ」の略 |
| rtl | 要素は編集不可。「Right to Left」の略 |
| auto | ユーザーエージェントによって自動的に書字方向を決める |
draggable
Drag and Drop APIを使用して要素をドラッグすることができるか指定します。
| 値 | 内容 |
|---|---|
| テキストを左から右へ書き進める。「Left to Righ」の略 | |
| auto | ユーザーエージェントによって自動的に書字方向を決める |
hidden（ヒドゥン）
要素がその時点でのページの内容に関連がないことを表し、指定された要素は表示されません。用途としては、ページ内に表示したくないデータの値などをセットしておき、POSTなどで値を送信する場合などに使用したりします。（商品IDやユーザーID）
id（アイディー）
要素にユニークな識別IDを指定します。文章内で一意である必要があり、同じ値を複数のidに設定することはできません。CSSのセレクタで、特定の要素を選択できるようになります。また、リンクのフラグメント識別子としても利用できます。
空白文字は使用できません。
lang（ランゲージ）
要素の内容の言語を指定します。html要素や文書全体に対して指定することができます。また、一部の要素に対しても指定することができます。
例：lang=”ja”
spellcheck（スペルチェック）
要素の内容に対するスペルチェックの可否を指定します。
| true | スペルチェックをします。 |
| false | スペルチェックをしません。 |
style（スタイル）
要素に直接スタイルシートを指定します。
※style属性でスタイルを指定する方法はあまり推奨されていません。
tabindex（タブインデックス）
「TABキー」による移動順序を指定します。正の数値で指定すると、その順序にフォーカスが移動します。負の数値を指定すると選択することができますが、TABキーでの移動順序に含まれません。また、0を指定した要素は最後にフォーカスします。
title（タイトル）
要素に補足情報を加えます
translate（トランスレート）
翻訳対象にするかどうかを指定します。
| 値 | 内容 |
|---|---|
| yes | 翻訳対象とする |
| no | 翻訳非対象とする |
イベントハンドラ属性は、JavaScriptのコードを閲覧者の操作に合わせて実行する属性です。
onclick
要素をクリックしたときにスクリプトを実行します。
oninput
入力コントロールにデータを入力したときにスクリプトを実行します。
onsubmit
入力コントロールからデータを送信するときにスクリプトを実行します。
output要素 書式・概要
<output 属性="属性値">～</output>output要素は計算の結果出力を表します。クライアントサイドスクリプトで結果を出力することが前提なので、JavaScriptを実行できない環境では利用できません。その場合は、output要素の内容が表示されます。
使用できる属性
for
入力コントロールに付与したid属性値を指定することで関連付けを行います。
form
任意のform要素に付与したid属性値を指定することで関連付けを行います。
name
output要素に名前を付与します。JavaScriptから要素にアクセスする際に使用します。
使用方法
<!DOCTYPE html>
<html lang="ja">
<head>
<title>outputタグ サンプルページ</title>
<meta charset="uft-8"><!-- 文字コード指定 -->
</head>
<body>
<form onsubmit="return false" oninput="out.value = price.value * (tax.value / 100)">
<p>消費税の計算をします。</p>
<input type="number" name="price" id="price" >*<input type="number" name="tax" id="tax" >（%）
=<output name="out" id="out" for="price tax">消費税が計算されます。</output>（円）
</form>
</body>
</html>chrome 実行サンプル
Firefox 実行サンプル
edge 実行サンプル
opera 実行サンプル
progress要素 書式・概要
<progress 属性="属性値">～</progress>progress要素は進捗状況（プログレスバー）を表します。JavaScript（jQuery）を使用することでリアルタイムで進行状況を示すことができます。対応ブラウザでは、プログレスバーを表示します。未対応ブラウザでは、progress要素の内容が代替コンテンツとして表示します。
使用できる属性
value
現時点でどれだけ完了したかを数値（浮動小数点数）で指定します。0以上かつ、max属性値以下にする必要があります。
max
完了となる値を指定します。初期値は「1.0」です。
使用方法
<!DOCTYPE html>
<html lang="ja">
<head>
<title>progressタグ サンプルページ</title>
<meta charset="uft-8"><!-- 文字コード指定 -->
</head>
<body>
<p>
ダウンロードの進捗：<progress max="100" value="50">50%</progress>
</p>
</body>
</html>chrome 実行サンプル
Firefox 実行サンプル
edge 実行サンプル
opera 実行サンプル
meter要素 書式・概要
<progress 属性="属性値">～</progress>meter要素は上限と下限が決まっている特定の範囲にある数値を表します。例えば、ディスクの使用状況や温度、湿度などメーターなどの直感的な形式で表示されます。最大値が定まっていない数字を表すために使うことは適当ではありません。進捗状況を表すものではありません。
使用できる属性
value
現時点での数値を指定します。
min
指定可能な値の最小値
max
指定可能な最大値
low
value属性で指定した値が「低い」と判断される上限値
high
value属性で指定した値が「高い」と判断される上限値
optimum
value属性で指定した値が「最適」と判断される値。省略するとlow属性値とhigh属性値の中間値になります。
使用方法
<!DOCTYPE html>
<html lang="ja">
<head>
<title>meterタグ サンプルページ</title>
<meta charset="uft-8"><!-- 文字コード指定 -->
</head>
<body>
<table border ="1">
<caption>ご家庭の最適湿度</caption>
<tr>
<th>本日</th>
<td>25%（低すぎ）</td>
<td><meter min="0" max="100" low="40" high="60" value="25">25%</meter></td>
</tr>
<tr>
<th>昨日</th>
<td>55%（最適範囲）</td>
<td><meter min="0" max="100" low="40" high="60" value="55">55%</meter></td>
</tr>
<tr>
<th>一週間前</th>
<td>70%（高すぎ）</td>
<td><meter min="0" max="100" low="40" high="60" value="70">70%</meter></td>
</tr>
</table>
</body>
</html>chrome 実行サンプル
Firefox 実行サンプル
edge 実行サンプル
opera 実行サンプル
低い領域・中間領域・高い領域単位で表示する
optimum属性を使用することで、低い領域・中間領域・高い領域を分けて表示することができる。
テストの点数としては100点なので、最適値（optimum属性）を100に設定。
<!DOCTYPE html>
<html lang="ja">
<head>
<title>meterタグ サンプルページ</title>
<meta charset="uft-8"><!-- 文字コード指定 -->
</head>
<body>
<table border ="1">
<caption>入試合格ライン</caption>
<tr>
<th>山田太郎</th>
<td>25点</td>
<td><meter min="0" max="100" optimum="100" low="40" high="60" value="25">25%</meter></td>
</tr>
<tr>
<th>山田花子</th>
<td>55点</td>
<td><meter min="0" max="100" optimum="100" low="40" high="60" value="55">55%</meter></td>
</tr>
<tr>
<th>山田次郎</th>
<td>70点</td>
<td><meter min="0" max="100" optimum="100" low="40" high="60" value="70">70%</meter></td>
</tr>
</table>
</body>
</html>chrome 実行サンプル
Firefox 実行サンプル
edge 実行サンプル
opera 実行サンプル
コメント