HTML辞典 output要素、progress要素、meter要素の解説

HTML辞典 HTML辞典
この記事は約13分で読めます。

計算の結果出力を表す<output>タグ、進捗状況を表す<progress>タグ、特定の範囲にある数値に表す<meter>タグの基本的な使用方法を掲載

HTML5

対応ブラウザ

ruby要素,rb要素,rt要素、rp要素、rtc要素 対応ブラウザ:chrome
ruby要素,rb要素,rt要素、rp要素、rtc要素 対応ブラウザ:firefox
ruby要素,rb要素,rt要素、rp要素、rtc要素 対応ブラウザ:safari
ruby要素,rb要素,rt要素、rp要素、rtc要素 対応ブラウザ:ms edge
ruby要素,rb要素,rt要素、rp要素、rtc要素 対応ブラウザ:ms ie
ruby要素,rb要素,rt要素、rp要素、rtc要素 対応ブラウザ:opera

カテゴリー・コンテンツモデル

要素 カテゴリー コンテンツモデル
output要素
  • パルパブルコンテンツ
  • フレージングコンテンツ
  • フローコンテンツ
  • フローコンテンツ
  • そのlabel要素によってラベル付けされていない、ラベル付け可能なフォーム関連要素を子孫要素に持つことは不可
progress要素
  • セクショニングルート
  • パルパブルコンテンツ
  • フローコンテンツ
  • リスト可能なフォーム関連要素
  • フローコンテンツ
  • 任意でlegend要素を1つ
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 実行サンプル

基本的なサンプル output要素 chrome実行サンプル

Firefox 実行サンプル

基本的なサンプル output要素 firefox実行サンプル

edge 実行サンプル

基本的なサンプル output要素 edge実行サンプル

opera 実行サンプル

基本的なサンプル output要素 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 実行サンプル

基本的なサンプル progress要素 chrome実行サンプル

Firefox 実行サンプル

基本的なサンプル progress要素 firefox実行サンプル

edge 実行サンプル

基本的なサンプル progress要素 edge実行サンプル

opera 実行サンプル

基本的なサンプル progress要素 opera実行サンプル

meter要素 書式・概要

<progress 属性="属性値">~</progress>

meter要素は上限と下限が決まっている特定の範囲にある数値を表します。例えば、ディスクの使用状況や温度、湿度などメーターなどの直感的な形式で表示されます。最大値が定まっていない数字を表すために使うことは適当ではありません。進捗状況を表すものではありません。

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 実行サンプル

基本的なサンプル meter要素 chrome実行サンプル

Firefox 実行サンプル

基本的なサンプル meter要素 firefox実行サンプル

edge 実行サンプル

基本的なサンプル meter要素 edge実行サンプル

opera 実行サンプル

基本的なサンプル meter要素 opera実行サンプル

低い領域・中間領域・高い領域単位で表示する

optimum属性を使用することで、低い領域・中間領域・高い領域を分けて表示することができる。

meter要素-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 実行サンプル

基本的なサンプル meter要素-optimum属性 chrome実行サンプル

Firefox 実行サンプル

基本的なサンプル meter要素-optimum属性 firefox実行サンプル

edge 実行サンプル

基本的なサンプル meter要素-optimum属性 edge実行サンプル

opera 実行サンプル

基本的なサンプル meter要素-optimum属性 opera実行サンプル

コメント

タイトルとURLをコピーしました