https://hmaster.net/


HTMLタグとCSSを使いメモ帳だけで無料でホームページを作成する 方法を分かりやすく解説しているサイトです。 初心者向けに見やすい、読みやすい作りになっています。

規定範囲内の容量を示す

<meter value="">~</meter>で規定範囲内の容量を示すこと ができます。ハードディスクの容量など全体に対する割合を表示できます。 meterタグには以下の属性を指定できます。


属性 説明
value 値・・・min属性の値 ~ max属性の値を表示する
max 最大値・・・max属性の指定がない場合1となる
min 最小値・・・min属性の指定がない場合0となる
low low属性の範囲内の上限値を指定する
high high属性の範囲内の下限値を指定する
optimum optimum属性の範囲内の最適値を指定する

■ 最小値~最大値

下の例では1番目は最小値0~最大値100までの範囲で50の値を表示しています。 2番目はmax、min属性の指定がないので0~1の範囲で0.5の位置が表示されています。

【ブラウザ表示】

0100

01


ソース

<p>0<meter value="50" min="0" max="100"></meter>100</p>
<p>0<meter value="0.5"></meter>1</p>

■ 低い値~高い値

下の例では1番目は最小値0~最大値1までの範囲で低い値が0.2、高い値が0.8で指定してあり 0.9の位置で表示しています。

2番目は0~100までの範囲で低い値が10、高い値が80で指定してあり60の位置が最適値として 表示されているため70は緑色になっています。

3番目は0~100までの範囲で低い値が10、高い値が80で指定してあり60の位置が最適値として 表示されているため5は黄色になっています。

4番目は0~100までの範囲で低い値が10、高い値が80で指定してあり95の位置が最適値として 表示されているため90は高い領域80~最適値の95の間に位置するため緑色になっています。

【ブラウザ表示】

01

0100

0100

0100


ソース

<p>0<meter value="0.9" low="0.2" high="0.8"></meter>1</p>
<p>0<meter value="70" low="10" high="80" min="0" max="100" optimum="60"></meter>100</p>
<p>0<meter value="5" low="10" high="80" min="0" max="100" optimum="60"></meter>100</p>
<p>0<meter value="90" low="10" high="80" min="0" max="100" optimum="95"></meter>100</p>

■ その他の項目

オートコンプリートを指定する
フォームの入力データの検証を無効にする
初期表示する内容を指定する
フォームの入力候補を表示する
計算結果の出力欄を表す
作業の進捗状況を示す

HTML5のタグ一覧

HTMLタグ一覧

CSS一覧

このエントリーをはてなブックマークに追加